Justify Content and Align Items

Flexbox offers alignment controls for both its main and cross axes, which solve many common navigation and card layouts.

justify-content distributes remaining space along the main axis; align-items positions items along the cross axis. In an ordinary row, justify-content works horizontally and align-items vertically. For a column, those responsibilities switch directions.

Values such as space-between distribute extra free space between items, while center groups items in the center. Alignment is visible only if the container has meaningful available space along that axis.

Use space-between to separate links and an action.

HTML

<nav class="align-demo" aria-label="Example navigation"><span>Overview</span><span>Resources</span><span class="action">Sign in</span></nav>

CSS

.align-demo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px; max-width: 390px; min-height: 45px; background: #f1f5f9; border-radius: 8px; }
.align-demo span { font-size: 13px; }
.align-demo .action { padding: 7px 10px; color: white; background: #1d4ed8; border-radius: 6px; }

Rendered output

Observe: The items distribute their spare horizontal space across the available row.

Use center on both alignment properties in a tall container.

HTML

<div class="align-stage"><span class="pill">Ready</span><span class="pill">Published</span></div>

CSS

.align-stage { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 120px; max-width: 370px; background: #eff6ff; border-radius: 9px; }
.pill { padding: 10px 15px; background: #1d4ed8; color: white; border-radius: 20px; }

Rendered output

Observe: Both pills form a centered horizontal group that is also vertically centered.

Main-axis alignment follows flex-direction; cross-axis alignment is perpendicular to it.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• justify-content does not always mean horizontal; flex-direction determines the main axis.
• space-between only creates visible spacing if there is spare main-axis space.

Set flex-direction:column on the second example and observe the changed axes. Give the stage a fixed height for a fair comparison.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Identify main versus cross axis first, then choose the alignment property that controls it.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.