Main Axis Under Control

This property controls how elements " spread out " along the main axis.

Main Strategies:

• flex-start / flex-end: Push elements to edges.
• center: Group in the center.
• space-between: Elements at edges, empty space in the middle.
• space-around: Free space equally around each. Edges are twice as narrow as gaps between blocks.
• space-evenly: Hit of the season! Absolutely identical margins both at edges and between elements.

.toolbar {
  display: flex;
  justify-content: space-evenly; /* Perfect margins without extra math */
}