CSS: justify-content (flex, grid)

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

Overflow alignment (for positional alignment only)

Overflow alignment (for positional alignment only)

justify-content: safe center;

xtodo

justify-content: unsafe center;

xtodo