The Flexbox Cookbook

Flexbox is a group of CSS properties for layout that can be used for putting things in rows and columns, aligning them, sizing them, grouping them or creating space between them.

Flexbox works in one dimension and it can be used to lay things out either vertically or horizontally. However, almost all web pages have a certain directionality to them: they scroll vertically. That means that the width of elements is typically constrained and their height is typically not.

For that reason, we’re mostly dealing with laying things out in rows, because columns just kind of take care of themselves by expanding in height and taking up more vertical space, of which there is plenty.

That said, please keep in mind that all of these examples can be flipped to work in a vertical direction as well, and at the very end of this page we’ll show you what that looks like.

Fluid Row

Icon
#fluid-row {
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
}

#fluid-row > * {
  flex: 1 1 auto;
}

Wrapping Fixed-Width Items

This setup is responsive by default: the rows will fit as many items as they can before wrapping to the next line.

#fixed-width-items {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
}

#fixed-width-items > * {
  flex: 0 0 100px;
}
Container width: 350px

Container size:

Wrapping Flexible Items

Here we change only one character: a 0 in flex a 1. That changes the items’ flex-grow to 1, so they will now fill the row. Note that they are no longer just 100px but if there are 3 of them on a 360px row, they will expand to 120px to fill the extra space (note that the gap between items makes this a little different).

The items on the last row will also grow to fill the whole row— even if there’s only one item it will grow to 100%. If that is not your desired effect, you’re probably better off using CSS Grid which does a better job of keeping things in their lines.

#flexible-width-items {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
}

#flexible-width-items > * {
  flex: 1 0 100px;
}
Container width: 350px

Container size:

Uneven Items

((not sure what this is but perhaps you can change width, flex-grow and flex-shrink with number inputs)) ((use text so the items are different widths))

Parent Properties

These Flexbox properties are poorly named and it’s hard to keep them straight. Here we present them in their order of importance. That is, when you’re sitting there trying to remember which property you need, grab justify-content first because that’s most likely what you’re looking for because it’s the main axis. Then go for align-items because that’s often also quite useful. The use of align-content is much more limited so you might simplify things for yourself by just not trying to remember that one at all.

Move Items on the Main Axis: justify-content

justify-content: start;
justify-content: center;
justify-content: end;
justify-content: space-evenly;
justify-content: space-around;
justify-content: space-between;

Move Items on the Cross Axis in One Row: align-items

align-items: start

align-items: end

align-items: center

align-items: stretch

align-items: baseline is perhaps the only one that might require some explanation. This setting will align the items based on the text inside of them and you can see the letters below on a nice line. Pretty neat.

Distribute Empty Space Between Rows: align-content

align-content: start;

align-content: center;

align-content: end;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

flex-grow

flex-shrink

flex-basis

This property is basically width. The advantage of using it vs width (or height) is that you can use the shorthand property flex. ((might be more useful for animations/transitions but I’m not sure))

align-self

Flex Columns

Just when you thought maybe you were getting it, we’re going to rotate everything 90 degrees.