If you ever wrote CSS to align and position elements you probably ran into some issues, which is totally normal because it wasn't always easy. At blogfoster, we often found ourselves writing weird hacks like adding unnecessary containers, using floats in too many places and having absolutely positioned children in relatively positioned parents.
Thankfully, it doesn't have to be like that anymore. With Flexbox, we can solve most layout problems with just a few lines of code. If you haven't already spent some time learning it, this post will give you an overview of all the properties you need to know. If you're already familiar with Flexbox you can also jump right to the end and have a look at some real world examples.
Flexbox container properties
display: flex
Once you set
display: flex
on your container element, all flex properties are applied with their default values to your container and its direct children (flex items). We're going to have a detailed look at all properties and find out why for instance after only settingdisplay: flex
suddenly all flex items align side by side.
flex-direction: row | column | row-reverse | column-reverse
Every flex container has a main axis defining the direction flex items are placed. By default
flex-direction
is set torow
, which means that the main axis goes from left-to-right. If you have it set tocolumn
the elements would stack from top-to-bottom as they would do without using Flexbox.justify-content: flex-start | flex-end | center | space-between | space-around
We can use
justify-content
to distribute our flex items along the main axis. By default, it's set toflex-start
. Be aware thatflex-direction
directly affectsjustify-content
.justify-content: flex-start
here means pack all flex items to the start of the main axis which is why we see all flex items on the left side by default.flex-end
packs everything to the right,center
, well, centers the items but the interesting ones arespace-between
andspace-around
.space-between
distributes the remaining space evenly between the items,space-around
does the same thing, only this time, the first and last items don't have any space towards the border of the container.align-items: flex-start | flex-end | center | baseline | stretch
align-items
is basically the same asjustify-content
only for the cross axis. If the main axis is horizontal, the cross axis is vertical (top-to-bottom), if the main axis is vertical, the cross axis is horizontal (left-to-right).align-items: flex-start | flex-end | center
are self-explanatory andbaseline
is useful if you want your items text content to be aligned.flex-wrap: nowrap | wrap | wrap-reverse
Let's assume all our flex items have explicit widths set to
30%
. If we have more than 3 items in the container, normally we'd think that the 4th item wouldn't fit the container and should either overflow or break into the next row. However, becauseflex-wrap
is by default set tonowrap
that doesn't happen. If we useflex-wrap: wrap
the 4th item breaks into a second row.align-content: flex-start | flex-end | center | space-between | space-around | stretch
Once we have some kind of wrapping it means that we have multiple rows or multiple columns. Those groups of items can also be aligned on the cross axis. When we have two rows, you'll notice that the second row starts right in the middle of the container. That's because
align-content
is set tostretch
by default which stretches the boundaries into two even halves. Withalign-content: flex-start
we can stack the rows to the top, withflex-end
to the bottom, etc.
Flexbox item properties
order: <number>
With the
order
property you can reorder the appearance of specific items. The number you specify defines the priority of the item in the ordering. An item that hasorder: 2
will appear before another one that hasorder: 1
. If both items have the same order priority, they appear in their natural DOM order. All items have an order property set to0
by default.flex-grow: <number>
This property defines how much of remaining space an item should take. By default, every item has this set to
0
which means they are not growing, not trying to take any space. If we set all of them to haveflex-grow: 1
we get items that grow equally and fill up the entire container. Setting one item to2
would mean that that item will take twice as much space as the ones that have it set to1
.flex-shrink: <number>
While
flex-grow
defines how the items should behave when there is extra space,flex-shrink
works exactly the same way only when there is not enough space and tells the items how to shrink.flex-basis: <length> | auto
To define the initial size of an item, we can use the
flex-basis
property. We can also use it to give one flex item fixed dimensions while other siblings shrink / grow around it (pretty common use-case). However, note thatflex-grow
andflex-shrink
take precedence over it.flex: <flex-grow> <flex-shrink> <flex-basis>
Shorthand property to set
flex-grow
,flex-shrink
andflex-basis
in one go.align-self: auto | flex-start | flex-end | center | baseline | stretch
With
align-self
we can override thealign-items
value that an item has inherited from its parent.
Examples
Example 1: Conversational UI
JS Bin on jsbin.comSee how powerful align-items
and flex-direction
can be for a conversational UI. With align-items: center
we vertically center the message bubbles and the avatars, with flex-direction: row-reverse
we have the user message on the right side starting with the avatar.
Example 2: Horizontally and vertically centering
JS Bin on jsbin.comEasily center an element horizontally and vertically with just three lines of CSS!
Example 3: Social Icons
JS Bin on jsbin.comEver had that little bit of space between inline elements because of line breaks in your markup? With Flexbox, we don't need to float them to get rid of that space. display: flex
does that automatically for us and we can set an exact margin
afterwords!
Example 4: Instagram Grid
JS Bin on jsbin.comSimple Instagram-like image grid using the flex-wrap
and flex
property.
Conclusion
Flexbox gives us the power to do more with less. It's incredible how certain problems like vertical alignment can suddenly be fixed so easily with just align-items: center
. Also, in many situations, we can achieve what we want without having to change or add additional markup. All in all, we can say that utilizing Flexbox means tackling layout problems in a safer and more predictable way.
Finally, before you go out into the wild and start flexing around, try FLEXBOX FROGGY. It's a funny way to learn Flexbox (or to prove that you already know it). If you're stuck somewhere, come back here or have a look at A Complete Guide to Flexbox by Chris Coyier which is an excellent, more detailed reference to all Flexbox properties.