Flexbox: flex-direction and justify-content

This post will dive into these two flexbox properties - flex-direction and justify-content.
For a more practical demonstration of building layouts with flexbox, take a look at the previous post of mine -

How do you build houses with Flexbox?

Manan Gouhari ・ Mar 22 ・ 4 min read

#css #html #tutorial

We're going to see all three properties in action with the help of three boxes.

1. flex-direction -

By default, flex-direction is set to row if nothing is specified.
Here's what happens when you set flex-direction to column.

flex-direction can be set to following values -

1. row
2. column
3. row-reverse
4. column-reverse

But mostly you'll find yourself using either row or column.

2. justify-content -

It is used to define how is content spaced out along the main-axis(main-axis is set by flex-direction).

It can be set to following values -

1. flex-start - items are placed from the start of axis
2. flex-end - items are placed at the end of the axis
3. center - items are placed at the center of the axis
4. space-between - items are spread out with the space between them being equal, first item is at start of the axis and the last element is at end of the axis.
5. space-around - items are spread out with equal space on either side
6. space-evenly - items are spread out with each empty space being equal.

Let's also take a look at how these properties behave when flex-direction is set to column.

Well, that is everything that I know about these two properties.
Which more flexbox properties would you like me to explore in future posts?

Also, a reminder: for more practical demonstration of how to build layouts with flexbox and what's the thought process behind it, check out my other blog post -

How do you build houses with Flexbox?

Manan Gouhari ・ Mar 22 ・ 4 min read

#css #html #tutorial