Skip to content

flexbox

Links :

visit

visit

Flexbox is an alternative to floats. Where floats can only position boxes horizontally, a flexbox gives complete control over the alignment, direction, order and size of our boxes.

image

Flexbox consists of a flex container and multiple flex items. For this guide i am using this html base file :

flex container

To make a container 'flex' able, add this display: flex to the css section.

flex container
1
2
3
4
5
6
7
.menu-container {
    color: #fff;
    background-color: #5995DA;  /* Blue */
    padding: 20px 0;
    display: flex;
    justify-content: center;    /* Add this */
}

Menu container can be just a div containing other divs. The justify-content setting will place the dive in the center of it's container (body in this case).

flex items

The items also get a display: flex; style and can then be moved around with numerous justify- settings, ordering etc.

flex item
1
2
3
4
5
6
.menu {
    border: 1px solid #fff;  /* For debugging */
    width: 900px;
    display: flex;
    justify-content: space-between;
}

This one divides the content of the .menu div evenly over the width. The menu has 3 elements that are placed left, center and right with this setting.

note that the justify line is applied to the parent, none of the children have to have any markup at this point.

The options for justify-content are :

  • center
  • flex-start
  • flex-end
  • space-around
  • space-between

summary

For a further description i refer to the links above, both are awesome explanations.

It's really scrolling through the examples and picking the layout you are looking for.