Introduction to CSS Flexbox
A quick walkthrough of all Flexbox properties and a few real-world examples.
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 setting display: 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 to row, which means that the main axis goes from left-to-right. If you have it set to column 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 to flex-start. Be aware that flex-direction directly affects justify-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 are space-between and space-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 as justify-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 and baseline 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, because flex-wrap is by default set to nowrap that doesn't happen. If we use flex-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 to stretch by default which stretches the boundaries into two even halves. With align-content: flex-start we can stack the rows to the top, with flex-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 has order: 2 will 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 0 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 have flex-grow: 1 we get items that grow equally and fill up the entire container. Setting one item to 2 would mean that that item will take twice as much space as the ones that have it set to 1.
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 that flex-grow and flex-shrink take precedence over it.
flex: <flex-grow> <flex-shrink> <flex-basis>
Shorthand property to set flex-grow, flex-shrink and flex-basis in one go.
align-self: auto | flex-start | flex-end | center | baseline | stretch
With align-self we can override the align-items value that an item has inherited from its parent.
Examples
See 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
Easily center an element horizontally and vertically with just three lines of CSS!
Example 3: Social Icons
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 margin afterwords!
Example 4: Instagram Grid
Simple 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.
