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:
Hello screen reader users! Several code examples of layouts are demonstrated in this page. There is no real content inside these examples that would help you understand them. So instead, for each code example, I decided tell you the code example is hidden, but you can inspect it with developer tools if you are a one. Sorry for the lack of a better solution.flex-flow: row wrap;
Hidden code demo below.flex-flow: row-reverse wrap;
Hidden code demo below.flex-flow: column wrap;
Hidden code demo below.column-reverse wrap
Hidden code demo below.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:
justify-content: flex-start;
Hidden code demo below.justify-content: flex-end;
Hidden code demo below.justify-content: center;
Hidden code demo below.justify-content: space-between;
Hidden code demo below.justify-content: space-around;
Hidden code demo below.justify-content: space-evenly;
Hidden code demo below.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!
justify-content: center; align-items: center;
Hidden code demo below.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
Generated: March 13th, 2022