Learn CSS Flexbox, the easy way

For a long time, the only tools available for creating CSS layouts were features like floats and positioning.

However, some layout designs were difficult to achieve with these tools, like:

1. Vertically centering a block of content inside of its parent.

2. Making all the children of a container take up an equal amount of the available width or height.

3. Making all columns adopt the same height even if they contain a different amount of content.

As you'll see in this post, flexbox makes a lot of these layout tasks much easier.

Display: Flex; The Switch
Okay, imagine you have a container <div> with some elements inside:

To activate the Flexbox layout, all you need to do is add display: flex to your container div.

And with that, you just created two invisible axes:

• Main Axis: This is where your elements will primarily align themselves. (Think horizontal rows by default)

• Cross Axis: This is the secondary direction, which is at 90 degrees to the main axis. (Think vertical columns by default)

Flex Direction: Changing the Flow
There's another property for changing the flow of these axes - flex-direction and by default, this is set to row, which means that items will flow horizontally from left to right.

But if you want your elements to be stacked vertically, you can set the flex-direction property to column.

But hey, Flexbox is flexible. You can even reverse the order on either axis:

• column-reverse: Items flow vertically from bottom to top.

• row-reverse: Items flow horizontally from right to left.

Justify Content: Controlling the Main Axis

To align those elements on the main axis, we use justify-content property.

By default, this is set to flex-start and items huddle together at the beginning of the main axis.

Here are the potential values that you can utilize for this property:

• flex-end: Items are arranged at the end of the main axis.

• center: Items gather politely in the center.

• space-between: Items spread out evenly, with the first item touching the start and the last item touching the end.

• space-around: Similar to space-between, but with equal space around each item (including the edges).

• space-eventy: Each item gets the exact same amount of space on all sides.

Align Items: Controlling the Cross Axis
To control the cross-axis, we use the align-items property.
The default value of align-items is stretch which makes items stretch to fill the container on the cross-axis.

• flex-start: Items align to the start of the cross-axis.
• flex-end: Items align to the end of the cross-axis.
• center: Items align to the center of the cross-axis.
• baseline: Items align their text baselines.

Key Point - Remember the Axes: The most important thing to grasp is that justify-content controls the main axis, and align-items controls the cross-axis. Once that clicks, Flexbox becomes a breeze!

The Gap Property
With Flexbox layout, there's no need to manually add margins to your elements. The gap property controls the spacing between items, applying instant spacing between everything.

Flex Wrap: Avoiding the Crush

By default, flex items cram into one line. But you can use flex-wrap: wrap to let them gracefully flow onto new lines.

• nowap (default): All items stay on one line.
• wrap: Items wrap onto multiple lines if needed.
• wrap-reverse: Items wrap onto multiple lines in reverse order.

Align Content: Control the spacing of the wrapped lines

If you set flex-wrap to wrap, you unlock a new property -
align-content which lets you control the spacing of those wrapped lines.

It works just like justify-content, but for multiple lines:

• flex-start: Lines pack towards the start.
• flex-end: Lines pack towards the end.
• center: Lines center themselves.
• space-between: Lines spread out with space between.
• space-around: Lines spread out with space around.
• stretch (default): Lines stretch to fill the container.

Flexbox Properties for Individual Items
Flexbox doesn't just stop at the container. We can style individual items too:

You can use the align-self tool for overriding the align-items setting on the container, but just for a specific item.

Let's say you want one element to be centered while others are at the top.

Other possible values are:

• auto (default): Inherits the align-items value from the parent container.
• flex-start: Aligns to the start of the cross-axis.
• flex-end: Aligns to the end of the cross-axis.
• center: Centers the item on the cross-axis.
• baseline: Aligns the item's baseline with other baselines.
• stretch: Stretches the item to fill the cross-axis (if height isn't set).

Flex Grow: Willingness to Grow
Think of this as an item's eagerness to grow. It controls how much extra space an item should take up compared to its siblings. A higher number means it will grab more of that extra space.

For example:

In this case, the ist item won't grow at all. The 2nd item will take up an equal share of available space. And the 3rd item will take up twice as much available space as the 2nd item.

Flex Shrink: Willingness to Shrink
This is like an item's willingness to shrink. It controls how much an item will shrink when there's not enough space. A higher number means it will shrink more readily.

• flex-shrink: 1; (default): The item will shrink proportionally if needed.
• flex-shrink: 0; The item refuses to shrink, even if it causes overflow.

For instance, we can set the first and last items to refuse to shrink by:

Flex Basis

This sets the initial size of an item before extra space is distributed. Think of it as the item's starting point.

It can be a specific length (like 200px or 30%) or keywords like auto (use the item's content size) or content (use the content's minimum size).

Bonus Tip: The Flex Shorthand
Instead of writing flex-grow, flex-shrink, and flex-basis separately, you can use the super convenient flex shorthand property.

With the shorthand, you can achieve the same effect with:

The order of the values matters in the shorthand. In this case, it sets flex-grow to 1, flex-shrink to 0, and flex-basis to 0.

Order
And finally, we have the order property, which changes the visual order of the items. It takes a number, and lower numbers appear first.

But if you rely solely on order to change the logical order it can affect accessibility. That's because screen readers and keyboard navigation follow the source code order.

Here's a Free Flexbox Cheatsheet for you.

Keep Coding!