Flexbox

Introduction

One of my favorite CS jokes, "The two hardest things about computer science: Cache Invalidation, Naming Things and Off by One Errors". My least favorite joke. Is the "I don't know how to center a div" joke. It is the dumbest joke and it makes my blood boil. Centering a div is simple. Before flexbox came in people usually did: margin: auto and text-align: center.

Flex box makes it so much easier. When learning flexbox, I used a tool called Flexbox Froggy. Pretty fun way to memorize all flexbox properties, but there are some of those properties I never use. Here is a list and a demo of the only properties I regularly use.

The two axes

Everything in flexbox comes down to two axes:

• The main axis is the direction the items flow. With flex-direction: row (the default) that's left to right.
• The cross axis is perpendicular to it. For a row, that's top to bottom.

If you remember one thing, remember this: justify-content works along the main axis, align-items works along the cross axis. When you switch to flex-direction: column, the axes swap and so do the two properties. That's the part that confused me for the longest time.

The properties

display: flex

Turn it on. The element becomes a flex containerthe parent element whose direct children become flex items and its direct children become flex items. Nothing deeper than the children is affected.

.container {
  display: flex;
}

flex-direction

Which way the main axis runs. row and column are the ones you'll use; the -reverse versions flip the order.

justify-content

How to distribute leftover space along the main axis.

• flex-start, center, flex-end pack the items at one end or in the middle.
• space-between pushes the first and last items to the edges and spreads the rest evenly.
• space-around gives every item equal space on both sides, so the edges get half a gap.
• space-evenly makes every gap identical, including the edges.

align-items

How items line up on the cross axis. stretch is the default, which is why flex items in a row all become the same height. center is the one you want when you're vertically centering things. baseline lines up the text baselines, which is handy when items have different font sizes.

flex-wrap

By default (nowrap) items squish to fit on one line. wrap lets them spill onto a new line when they run out of room.

gap

Space between items. This used to require margins and :last-child hacks. Now it's one line.

Playground

Click through the options below. The box at the bottom is the exact CSS being applied to the container. Try switching flex-direction to column and then changing justify-content to see the axes swap.

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

How to Center a Div

Lets hope this brings in some SEO.

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Properties on the items

Everything above goes on the container. There are a few that go on the children, and the one worth knowing is flex.

.item {
  flex: 1;
}

flex: 1 tells an item to grow and take up an equal share of leftover space. If one item has flex: 2 and the rest have flex: 1, it gets twice as much. This is how you make a sidebar with a fixed width and a main column that fills the rest:

.sidebar {
  flex: 0 0 240px; /* don't grow, don't shrink, start at 240px */
}

.main {
  flex: 1; /* take everything else */
}