justify-content: main-axis distribution

How items spread along the main axis

.container { display: flex; }
.container { justify-content: flex-start; }     /* all at the start (default) */
.container { justify-content: flex-end; }       /* all at the end */
.container { justify-content: center; }         /* all bunched in the middle */
.container { justify-content: space-between; }  /* first at start, last at end, equal gaps */
.container { justify-content: space-around; }   /* equal space on both sides of each */
.container { justify-content: space-evenly; }   /* equal space between AND at the edges */

The 3 you'll use most

• `space-between` — for nav bars where the logo is on the left and links are on the right.
• `center` — for centering content blocks (a hero CTA, an empty state).
• `flex-end` — for "actions at the right" patterns (form footer buttons).

Demo: nav bar with logo + links

<nav class="nav">
  <strong>Brand</strong>
  <div class="links"><a>Home</a> <a>About</a></div>
</nav>

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Two children: Brand and Links. space-between pushes Brand to the left edge, Links to the right edge. Perfect nav bar in 3 lines.

When main axis is vertical (flex-direction: column)

justify-content now controls VERTICAL placement. center centers items vertically within the container. Use this for "vertically centered hero" — the classic CSS problem solved in one line.