Flex alignment in CSS

Justify along the main axis, align along the cross axis.

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.header .account {
  margin-inline-start: auto;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

How it works

1. justify-content: space-between pushes the ends apart.
2. align-items lines children up across the axis.
3. margin-inline-start: auto shoves one child to the far end.

Keywords and builtins used here

• account
• centered
• display
• gap
• header
• rem
• vh

The run, in numbers

Lines

17

Characters to type

234

Tokens

52

Three-star pace

80 tpm

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

Type this snippet

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

← Previous Next →