Flexbox

Since we have gotten rid of IE9 (HOORAY!!!) we can start to use some new CSS functionality. The first one I want to show you is flexbox. Using flexbox we can create really responsive layouts that easily fill empty space that normally would of required some form of hack to fix. Remember those days when you used to use floats and tables to get the layout you wanted? Well now you can use flexbox.

Flexbox Container

If you want items to be displayed using flexbox then understanding how to set up the container is very important. The container is the parent of the items you want to display using flexbox. The container is the element you set display:flex; on to let the browser know how to render it. It's here you also define the flex-direction, align-items and justify-content properties to control how the items are displayed.

display

Set display to flex or inline-flex to start using flexbox

flex-direction

Set flex-direction to row, column, row-reverse or column-reverse to tell the browser what direction you want the main axis of the flex to occur. row runs left to right, column runs top to bottom.

justify-content

Set justify-content to flex-start, flex-end, center, space-between or space-around. justify-content defines the alignment of the items along the main axis. See the below pen to see some examples.

align-items

Set align-items to flex-start, flex-end, center, stretch or baseline. align-items is responsible for determining items alignment perpendicular to the main axis. See the pen below:

Items

Now you have seen how to set up the container it's time to look at the items and see the different ways you can manipulate the items.

flex-grow

Set flex-grow to a positive integer. This is a factor by which the items grow to fill the space. Items with flex-grow:1; will be half the size of items with flex-grow:2;.

flex-basis

Set flex-basis to a size i.e. 200px, 50%, 5rem. This determines the initial size of the item before being sized to fit.

flex

Use this rather than defining the flex-grow, flex-shrink and flex-basis separately. css .item{ flex: 1 1 200px; }

order

Set order to an integer. This determines where in the flexbox the item appears. The smaller the number the closer to the start the items appears.

align-self

Set align-self to flex-start, flex-end, center, stretch or baseline. This overrides any value defined by align-items on the container.

Examples

There are a lot of concepts to try get you head around so let's take a look at some examples.

Flexible middle

Say you have a fixed size container and you want a header and a footer to always be at the top and bottom respectively. Now you want the remaining container space to be filled by the content. Usually you would end up doing something with position:absolute; or pull out some table-cell wizardry to get the job done. Well check out this pen:

Note the use of flex:none; on the two fixed size elements, that is very important.

Lining up text with an icon

This used to be a bit of a pain, check out these few examples:

Always centered

No more margin margin:0 auto; necessary, flexbox can do it now :D

Conclusion

Hopefully these few examples will give you some inspiration as to how useful flexbox is and inspire you to start dabbling in it yourself. Any examples you want to see added? Feel free to ask.

Rik