Flexbox basics in CSS

One flex container turns its children into a row you can control.

.toolbar {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

How it works

1. display: flex lays children along the main axis.
2. gap spaces them without margins on the children.
3. flex-direction switches the main axis to vertical.

Keywords and builtins used here

• display
• gap
• rem
• stack
• toolbar

The run, in numbers

Lines

12

Characters to type

145

Tokens

38

Three-star pace

80 tpm

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

Type this snippet

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

Next →