Flexbox, the GOAT

A few years ago the massive adoption of flexbox was like a wet dream coming true. Imagine: you take the inline-block property where things stack right after each other, but you can decide the direction of this stacking both on the x and y axis ; and also how the elements behave between themselves!

The main difference comes from the declaration. Instead of declaring display:flex; on each element, you only declare it on the parent and it acts on the children.

<div style="display:flex;">
    <div>1</div>
    <div>2</div>
</div>

So how does that work?

Decide the direction

First, you decide if the flow goes horizontally or vertically, and in which direction. For this, you can use the great flex-flow: ???; shortcut property. Its most common options are:

row

the children will be displayed from left to right

row-reverse

the children will be displayed from right to left

column

the children will be displayed from top to bottom

column-reverse

the children will be displayed from bottom to top

You can also decide if the child elements should wrap aka create a new line when they lack to be on a single line, by adding wrap or nowrap.

Real code examples:

Neat right?

Align your children on the X axis!

Alignment is cool but what if you could decided the distance between those aligned children or even better, let the browser handle it for you?

Let's reuse this example of a row going from left to right:

<div style="display:flex; flex-flow:row wrap;">
    <div>1</div>
    <div>2</div>
</div>

We're going to use justify-content: ???; to fine tune the way child elements behave between each others on the horizontal axis:

flex-start

The default value, stack everything at the start of te flow.

flex-end

Stack everything at the end of the flow.

center

Stack all elements at the center with equal white space on the left and right.

space-between

Space elements as far as possible from each others.

space-around

Automatically gives each child element the same left and right margins.

space-evenly

Creates equal white space between all elements.

Real code examples:

Align your children on the Y axis!

Now the cool thing is... The align-items: ???; CSS property takes the same values as justify-content, but for the vertical axis! Which means we have a way to align on the x and y axis in two lines of code!

It allows us to create the holy grail of alignment: center both vertically and horizontally in two lines of CSS!

Praise flexbox! (/≧▽≦)/

There's a lot more you can do with Flexbox. You can align items individually, reorder items, decide if they are allowed to shrink or grow in size. If you want to learn more about Flex, try the in-game browser Flexbox Froggy. If you are not into games try this free course on youtube.

You might be thinking Yeah this is cool, but not as cool as my good old tables. Well rejoice dear reader as I'm going to make you happy.

Next: CSS Grid the almighty