Using flexbox
Flexbox is easily one of the most helpful bits of CSS I’ve ever learned. You can think of it as a tool to help you group divs together side-by-side.
Here are two 25px divs, without flexbox:
<div class="flex">
<div class="item"></div>
<div class="item"></div>
</div>
In order to apply flexbox, we need to wrap both of those divs in another div. That “container” will be the element we apply flexbox to. Throughout this article, we will be applying styles to this container, not the flex items themselves.
So let’s add our CSS to the container:
.flex {
display: flex;
}
Now our div
s are side-by-side - this is the glory of flexbox!
Flex wrapping
If we have too many items and not enough space on the page, extra flex items will either run off of the page, or look very squished, like this:
✏️ Tip
Whether your flex items run off of the page or become squished depends on whether your items are inside of a container with a fixed width. If there’s no fixed-width on the container, they will run off the page.
We can fix this by setting our flex container to wrap
. This tells the flex items to automatically
“wrap” onto the next line if there isn’t enough space to fit.
Flex alignment
In the above example, our divs have a static width and are further constrained by this page’s layout, there’s some space left over on the right.
We can use justify-content
on our flex container to determine how our flex items are spread out.
For example, here’s justify-content:space-between
:
As you can see, the squares on the top row are spaced differently from the squares on the bottom. This happens because justify-content: space-between
distributes the available space between the flex items by calculating the total width of the items and spreading the remaining space evenly between them. There’s no space added before the first item or after the last - just between the items themselves - so the result depends on how many items fit in a single row.
Here’s how justify-content:center
looks with those same divs:
Flex gap
You can add space between flex items with row-gap
, column-gap
or the shorthand gap
(which applies to both rows and columns).
The gap
property refers to space between flexbox rows and columns.
Let’s return to our earlier demo and add gap: 10px;
so that our flex items can breathe. This adds 10px
of space between each row and column.
Now you know enough to make a nice-looking image gallery!
Flex order
Changing the flex order can come in handy when you’re designing mobile-friendly layouts.
For example, take a look at the demo below. Click and drag the bottom right corner to resize the demo. As the screen space narrows, a @media
query kicks in and the layout flexes. Since the sidebar comes first in the HTML, it displays on top and takes up a lot of space on small screens.
With flexbox, you can change the order in which flex items appear.
.sidebar {
order: 2;
}
.content {
order: 1;
}
Try resizing this new version, which uses order
.
Now the sidebar appears on the bottom of the content when resized. Look at that flexibility!
Flex stretch
Sometimes you might want a div to fill the remaining horizontal space. This is one of those rare cases where you apply the property to the flex item itself instead of its container/parent.
The below div has no width set, yet it stretches to fill the entire width with flex-grow:1;
By default, flex containers are set to flex-direction:row;
which means its flex items “flow” in a horizontal row.
If you were to set flex-direction:column;
on the parent then flex-grow:1;
would fill the entire height.
<div class="flex-parent">
<div class="flex-child"></div>
</div>
.flex-parent {
flex-direction: column;
}
.flex-child {
flex-grow: 1;
}
Learn more
- CSS Flexbox Layout Guide by CSS Tricks provides a much more comprehensive overview of Flexbox.
- Flexbox Froggy is a game you can play in your browser to practice flexbox.