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 -
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 -
row
column
row-reverse
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 -
-
flex-start
- items are placed from the start of axis -
flex-end
- items are placed at the end of the axis -
center
- items are placed at the center of the axis -
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. -
space-around
- items are spread out with equal space on either side -
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 -
Top comments (0)