Demonstrating `justify-between`, `justify-around`, and `justify-evenly`

justify-between : Space is distributed between items. First item at start, last at end.

Item 1
Item 2
Item 3

Typically used for navigation bars where you want items spread across the full width.

justify-around : Space is distributed around items. Equal space on both sides of each item (half at ends).

Item A
Item B
Item C

Useful for photo galleries or feature lists where items should have breathing room on all sides.

justify-evenly : Space is distributed evenly between items and at the ends.

Box X
Box Y
Box Z

Provides the most visually "even" spacing across the entire container.

Note:

These justify-* classes are for distributing items along the main axis of a flex container. For a standard row ( flex-row , which is default), this is horizontal.