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 divs 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