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
Once you set
display: flexon 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 setting
display: flexsuddenly 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-directionis set to
row, which means that the main axis goes from left-to-right. If you have it set to
columnthe 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-contentto distribute our flex items along the main axis. By default, it's set to
flex-start. Be aware that
justify-content: flex-starthere 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-endpacks everything to the right,
center, well, centers the items but the interesting ones are
space-betweendistributes the remaining space evenly between the items,
space-arounddoes 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-itemsis basically the same as
justify-contentonly 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 | centerare self-explanatory and
baselineis 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, because
flex-wrapis by default set to
nowrapthat doesn't happen. If we use
flex-wrap: wrapthe 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-contentis set to
stretchby default which stretches the boundaries into two even halves. With
align-content: flex-startwe can stack the rows to the top, with
flex-endto the bottom, etc.
Flexbox item properties
orderproperty you can reorder the appearance of specific items. The number you specify defines the priority of the item in the ordering. An item that has
order: 2will appear before another one that has
order: 1. If both items have the same order priority, they appear in their natural DOM order. All items have an order property set to
This property defines how much of remaining space an item should take. By default, every item has this set to
0which means they are not growing, not trying to take any space. If we set all of them to have
flex-grow: 1we get items that grow equally and fill up the entire container. Setting one item to
2would mean that that item will take twice as much space as the ones that have it set to
flex-growdefines how the items should behave when there is extra space,
flex-shrinkworks 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-basisproperty. 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 that
flex-shrinktake precedence over it.
flex: <flex-grow> <flex-shrink> <flex-basis>
Shorthand property to set
flex-basisin one go.
align-self: auto | flex-start | flex-end | center | baseline | stretch
align-selfwe can override the
align-itemsvalue that an item has inherited from its parent.
Example 1: Conversational UIJS Bin on jsbin.com
See how powerful
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 centeringJS Bin on jsbin.com
Easily center an element horizontally and vertically with just three lines of CSS!
Example 3: Social IconsJS Bin on jsbin.com
Ever 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
Example 4: Instagram GridJS Bin on jsbin.com
Simple Instagram-like image grid using the
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.