Flexbox Explained with Ugly Sketches

Flexbox is a fun new way to get more flexibility in your layouts. It's pretty easy to use simply by setting display: flex on a container element. The children elements become flex items, and there's a bunch of properties available to play around with both the flex container element and the flex items. Unfortunately it's still very likely that you'll want to support browers that will require you to use vendor prefixes for flexbox to work properly. You can use something like autoprefixer to make your life easier.

Here are some Ugly Sketches™ to help you make sense of it all:

Flexbox sketch 1

In the first example, we have just our default setup:

.container {
  display: flex;
}

Then, we space-out the flex items with space-between:

.container {
  display: flex;
  justify-content: space-between;
}

Or we space-out the flex items with space-around:

.container {
  display: flex;
  justify-content: space-around;
}

Or we have the items aligned to the right:

.container {
  display: flex;
  justify-content: flex-end;
}

Flexbox sketch 2

Now we have the items occupy 100% of the width:

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

In the second example, item B grows:

.container {
  display: flex;
}

.item-a, .item-c {
  flex-grow: 1;
}

.item-b {
  flex-grow: 2;
}

And in the 3rd example, the items align at the bottom if their height differ:

.container {
  display: flex;
  align-items: flex-end;
}

Flexbox sketch 3

Here now the height of all the flex items becomes the same as the tallest item:

.container {
  display: flex;
  align-items: stretch;
}

Or in the 2nd example, the items are centered on the axis:

.container {
  display: flex;
  align-items: center;
}

Flexbox sketch 4

By default, flex items are arranged in a row, but you can just as easily arrange them in a column:

.container {
  display: flex;
  flex-direction: column;
}

Flexbox sketch 5

And when flex items are arranged in a column, everything else still applies. Here in the example, the items are spaced-out using space-between:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Search

🔎 Searching...