items are leftmost justify-content: flex-start; Each item has width of 200px;
A flex item 1

justify-content is how the items appear horizontal in the container row.

Item 2
Item 3

items are rightmost justify-content: flex-end; Each item has width of 200px;
A flex item 1

justify-content is how the items appear horizontal in the container row.

Item 2
Item 3

extra space is around outside items justify-content: space-around; Each item has width of 200px;
A flex item 1

justify-content is how the items appear horizontal in the container row.

Item 2
Item 3

horizontal spacing is centered. justify-content: center; Each item has width of 200px;
A flex item 1

justify-content is how the items appear horizontal in the container row.

Item 2
Item 3

evenly spaced across all margins justify-content: space-between; Each item has width of 200px;
A flex item 1

justify-content is how the items appear horizontal in the container row.

Item 2
Item 3