Want to inline or float your columns?

Add display: flex to your parent container.

alt text

Want them to stack?

Remove display: flex from your parent container.

alt text

Want to change the order of the columns?

Add order property to your columns. Adjust 1, 2, 3 etc depending on the order you want.

alt text

Want to adjust column widths?

Add flex property to your columns. Column 1 has flex:2. Column 2 has flex 2. Column 3 has flex 1. You have to add your column margins manually.

alt text

Or you can use flex-basis (flexbox way of saying width)

Add flex-basis to each column and add say… 35% on column 1 and 2 and 20% on column 3. The 10% left over will be your margins when you add justify-content: space-between on the parent container. Take a look at the second photo down below.

alt text

Justify-content: space-between added to parent container.

Use this only when you use flex-basis on your columns. This will give margins to your columns. As long as your columns add under 100% of the parent containers width. Whatevers left over will be your margins using space-between.

alt text

Other justify-content options; What if you want to align columns to the left, right or center them?

Add justify-content: flex-start to your parent container.

alt text

Add justify-content: flex-end to your parent container.

alt text

Add justify-content: center to your parent container.

alt text

Want equal height columns?

No need to add anything. By default align-items is set to stretch on the parent container. This enables equal height columns.

Oh, you don’t want equal height columns?

Simply apply align-items to your parent container and add either flex-start, flex-end or center depending on what look you want. Examples below.

Add align-items: flex-start to your parent container.

alt text

Add align-items: flex-end to your parent container.

alt text

Add align-items: center to your parent container.

alt text

Codepen

View code https://codepen.io/drunktuts/pen/YZroyy

Summary

I tried learning flexbox a couple of years ago and was put off by the lack of support and documentation. I decided to re-visit flexbox after reading that about 97% of all web traffic will be using browsers that support flexbox as of right now.

At first it seemed very confusing, but now it just makes sense and is a time saver for layout building. I’m excited to start using flexbox for future projects. It’s time to get on the wagon. You won’t regret it.

Want to learn more?

Watch this video for a more in-depth tutorial