An intro to Flexbox

Last week, we learned about CSS Grid and how to build a reusable grid system with it.

Today, I wanted to talk about Flexbox. Let’s dig in!

What is Flexbox?

Flexbox is a way for you to create flexible layouts arranged as either columns or rows.

With CSS Grid, you define a layout, and your content (text, images, and so on) wraps and resizes to fit the containers. With Flexbox, you provide some layout guidance, and the containers flex and resize to accommodate the content you put in them.

That’s why it’s called Flexbox.

Creating a Flexbox layout

For example, imagine you had a div with the .grid-flex class on it, and two elements nested inside it.

<div class="grid-flex">
	<div>1</div>
	<div>2</div>
</div>

We want the nested elements to appear side-by-side in a row.

To start, we’d define the display property for our .grid-flex class with a value of flex.

.grid-flex {
	display: flex;
}

With just this one line of CSS, our elements now appear side-by-side, with the parent containers automatically sized to match the content.

Here’s a demo.

Flexbox automatically flexes

The core feature of Flexbox is that the container elements automatically resize to match the content within them.

For example, let’s imagine that one of our elements has longer text in it than the other…

<div class="grid-flex">
	<div>1</div>
	<div>234567890</div>
</div>

Flexbox will automatically increase the size of the second div to accommodate the longer text.

Here’s another demo.

Adding a gap

Just like with CSS Grid, we can use the gap property to define the amount of space between each Flexbox item.

.grid-flex {
	display: flex;
	gap: 1rem;
}

Here’s a demo of gap.

Rows and columns

By default, flexbox aligns items in a row. You can change that by setting flex-direction to column.

.grid-flex {
	flex-direction: column;
}

The flex-direction defines the primary axis and secondary axis (this matters when we start aligning things).

For flex-direction: row, the primary axis is left-and-right (or horizontal), and the secondary axis is up-and-down (or vertical). For flex-direction: column, it’s the opposite.

Alignment

Flexbox offers a few ways to align content…

The primary axis

The justify-content property tells Flexbox how to align your containers along the primary axis, and has several possible values…

• flex-start - Pack items from the start (default)
• flex-end - Pack items from the end
• center - Pack items around the center
• space-between - Distribute items evenly. The first item is flush with the start. The last is flush with the end.
• space-around - Distribute items evenly. Start and end gaps are half the size of the space between each item.
• space-evenly - Distribute items evenly. Start, in-between, and end gaps have equal sizes.

Having all of these options is very powerful, but also a little confusing.

I personally find having a demo to visually see the differences is useful. See them in action here.

The secondary axis

Similarly, the align-items property tells flexbox how to align the containers along the secondary axis.

It also has several values. Some of them are the same as the ones for justify-content, but some are not…

• stretch - Stretch containers to match the biggest one (default)
• flex-start - Align items to the start of the axis
• flex-end - Align items to the end of the axis
• center - Center items along the axis

Once again, here’s a demo to see these properties in action.

Wrapping

By default, Flexbox will keep all of your content on a single line along the primary axis.

While it will adjust the containers to fit the content, sometimes, there’s simply too much content for the space available. In these situations, your content will run outside the parent container and result in horizontal or vertical scroll.

You can use the flex-wrap property with a value of wrap to tell Flexbox to wrap content onto another line if required.

.grid-flex {
	display: flex;
	flex-wrap: wrap;
}

Here’s a demo of flex-wrap in action.

Advanced features

As you can see, Flexbox does a lot of stuff!

One item not covered in this tutorial is defining how Flexbox content grows and shrinks. You can do lots of cool stuff with the flex-basis flex-grow, and flex-shrink properties.

But it also gets really complicated, really fast. And frankly, those are usually the situations where I reach for CSS Grid instead.

Tomorrow, we’ll look at some practical applications for Flexbox, and how I use it in my own projects.