flexbox

Page layouts can be easily achieved with the added bonus of equalised heights. To create gutters we can use the same technique with negative margin and added paddings like we did with the float and inline-block layouts.

We can again combine our grid CSS with the width utility classes for easy responsive layouts.

Holy grail layout

Holy grail layout - different order, same markup

A very useful benefit of flexbox is the order property which can be used to change the display order of items without changing the source order.

This is a common situation in responsive layouts where you might want a certain order on smaller viewports and a different one on larger viewports. Resize to browser to see that the nav element comes after the header on smaller viewports.

Product grid

This may look like a multi dimensional layout but really its a one dimensional layout with wrapping. If the wrapping was turned off it would all display in one line.

Column spanning is easily achievable but row spanning is not possible.

CSS Pocket Reference

Know your margins from your paddings.

Equal heights :)

meow vol iii

Volume 3, now meow's what I call literature

meow vol iii

Volume 3, now meow's what I call literature

meow vol iii

Volume 3, now meow's what I call literature

meow vol iii

Volume 3, now meow's what I call literature

meow vol iii

Volume 3, now meow's what I call literature

Justified content

flexbox's justify-content: space-between; can be used to easily distribute items evenly along a line.

You can layout items along a line vertically by using the flex-direction property.

Vertically aligned content

Vertically aligning items is now trivially easy.

Multi dimensional layout

You can create a multi dimensional layout that has both row spanning and col spanning by combining multiple flexbox declarations. In the example below we have three flexbox declarations.

The first is on the <div class="multi-dime"> wrapper element lays the <div class="multi-dime__col"> elements out side by side.

Then flexbox is declared on the two <div class="multi-dime__col"> elements with the property flex-direction: column declared so the elements inside are displayed vertically

The flex-grow property is used on the header and article elements to row span.