Get my e-book focusing on CSS3 and
modern web UI development.
dig into web UI development
Last modified: 20. 7. 2016
display: flex flexbox container can be defined as an inline element -
display: inline-flex. In both cases, all direct descendants become flexbox items.
This property will set the direction of the main flexbox axis.
flex-direction: row | row-reverse | column | column-reverse
The default (
row) value will place all flex items in a row. If you want to
make a vertically oriented layout, use the
The order of items will correspond to the HTML order. If you want to reverse the
order, just use the
column-reverse values. This will only
affect the visual rendering of the items, not the actual order - i.e., when
rendering a site or going through the navigation using tab key. Some of you might
have noticed that we can use this property to change the order of list items.
Live demo: http://cdpn.io/e/pbarBw
flex-wrap: nowrap | wrap | wrap-reverse
nowrap value tells us that all elements will stay on a single line
next to each other (or under each other when using
Then we have the
wrap value. This value will wrap the items onto multiple
lines if the items’ content can’t fit onto a single line. The last flex item on
the first line will break onto the next line and align under the first item.
wrap-reverse value does the opposite - the last item will jump onto the
previous line and align over the first item.
Live demo: http://cdpn.io/e/mERZxB
Let’s explain this in examples:
flex-flow: row– this is the default value. Items are placed in a single line and do not break.
flex-flow: column wrap– items are placed in a column and break.
We have explained the flex container properties. Now, let’s explain flex items as there is more to explain.
justify-content: flex-start | flex-end | center | space-between | space-around
Let’s apply the
justify-content property to the flex container, dictating how
flex items will be aligned along the main axis. The default value is
flex-start, aligning the items to the start of the main axis.
Live demo: http://cdpn.io/e/doGjaZ
align-items: stretch | flex-start | flex-end | center | baseline
align-items property can also be applied to the flex container. The
default value is
stretch which stretches the item to the full width of the
Be careful, though! The
stretch value will not work if the items size of the
cross-axis is defined. In other words, if
height is set, it will not work.
Live demo: http://cdpn.io/e/RNmvmr
align-content: stretch | flex-start | flex-end | center | space-between | space-around
And here is another alignment property. This one applies only to flex containers whose items are wrapped onto multiple lines.
Live demo: http://cdpn.io/e/oXbMRo
So, is all clear now? Ok, now let’s move on to browser support.