CSS: justify-content

Position values

Positional alignment

justify-content: flex-start

default.

Aligns items to the start of the main axis. Ignores writing direction. Works only in Flexbox.

1

2

3

justify-content: flex-end

justify-content: start

Aligns items to the start of the main axis. Respect writing direction. Works in both Flexbox and Grid.

justify-content: end

justify-content: left

Forces alignment to the left side. Ignores writing direction. Only works in Flexbox, not in Grid.

justify-content: right

justify-content: center

1

2

3

Normal alignment

justify-content: normal

• In Flexbox, it means flex-start.
• In Grid, it means start.

Distributed alignment

justify-content: space-between

1

2

3

justify-content: space-around

1

2

3

justify-content: space-evenly

1

2

3

justify-content: stretch

xtodo

Overflow alignment (for positional alignment only)

Overflow alignment (for positional alignment only)

justify-content: safe center

xtodo

justify-content: unsafe center

xtodo