The flex shorthand in CSS

Grow, shrink and basis, and the three values worth memorising.

.sidebar {
  flex: 0 0 16rem;
}

.content {
  flex: 1 1 0;
  min-width: 0;
}

.icon {
  flex: 0 0 1.5rem;
}

.spacer {
  flex: 1 1 auto;
}

How it works

1. flex: 1 means grow equally and ignore the content width.
2. flex: 0 0 auto refuses to grow or shrink.
3. flex-basis beats width for a flex item.

Keywords and builtins used here

• content
• flex
• icon
• rem
• sidebar
• spacer

The run, in numbers

Lines

16

Characters to type

128

Tokens

46

Three-star pace

80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 34 seconds.

Type this snippet

Step 4 of 6 in Flexbox, step 4 of 24 in Flexbox & grid.

← Previous Next →