A flex navigation bar in CSS

A real bar: brand on the left, links in the middle, account pushed right.

.bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  block-size: 3.5rem;
}

.bar .brand {
  flex-shrink: 0;
  font-weight: 700;
}

.bar nav {
  display: flex;
  gap: 1rem;
  margin-inline-end: auto;
}

How it works

1. A nav set to flex handles the middle group.
2. gap plus an auto margin removes the need for spacer elements.
3. flex-shrink: 0 protects the brand from squashing.

Keywords and builtins used here

• bar
• brand
• display
• gap
• rem

The run, in numbers

Lines

17

Characters to type

193

Tokens

54

Three-star pace

80 tpm

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

Type this snippet

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

← Previous Next →