Wrapping and growing in CSS

Letting flex items wrap onto new lines, and how they share leftover space.

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: flex-start;
}

.chips > * {
  flex: 0 1 auto;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.cards > .card {
  flex: 1 1 16rem;
}

How it works

1. flex-wrap: wrap allows more than one line.
2. flex: 1 1 12rem grows, shrinks, and starts at a sensible basis.
3. align-content spaces the lines once there are several.

Keywords and builtins used here

• card
• cards
• chips
• display
• flex
• gap
• rem

The run, in numbers

Lines

20

Characters to type

206

Tokens

64

Three-star pace

80 tpm

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

Type this snippet

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

← Previous Next →