Basic structure of a flex grid. justify-content: start
Aligns items to the start of the flex container. This is the default setting.

1
2
3
4
5
6

Basic structure of a flex grid.justify-content: center.
Centers items in the flex container.

1
2
3

Basic structure of a flex grid. justify-content: flex-end
Aligns items to the end of the flex container.

1
2
3

Basic structure of a flex grid. justify-content: space-between
Displays items with equal spacing between them. The first item is aligned to the start, and the last item is aligned to the end.

1
2
3
4
5
6
5
6

Basic structure of a flex grid. justify-content: space-evenly
Distributes items so that the spacing between any two items (and the space to the edges) is equal.

1
2
3
4
5
6