Introduction to Flexbox

Flexbox arranges sibling elements along one main axis and gives you convenient control over space and alignment.

Set display: flex on a container to turn its direct children into flex items. The main axis follows flex-direction, and the cross axis is perpendicular. By default, the main axis runs along the inline direction of the writing mode (typically left-to-right in English).

Unlike manual margins or floats, flex layout distributes available space as part of the container’s layout algorithm. Only direct children become flex items; deeper descendants need their own flex container to participate.

Compare three cards using ordinary block layout.

HTML

<div class="flex-demo"><div class="flex-item">One</div><div class="flex-item">Two</div><div class="flex-item">Three</div></div>

CSS

.flex-demo { background: #f1f5f9; padding: 10px; max-width: 370px; }
.flex-item { padding: 10px; border: 1px solid #93c5fd; background: #dbeafe; border-radius: 7px; margin: 4px; }

Rendered output

Observe: Without display:flex, the block-level cards stack on separate rows.

Place exactly the same children along one axis.

HTML

<div class="flex-demo"><div class="flex-item">One</div><div class="flex-item">Two</div><div class="flex-item">Three</div></div>

CSS

.flex-demo { display: flex; gap: 8px; padding: 10px; background: #f1f5f9; max-width: 370px; }
.flex-item { padding: 10px 16px; background: #dbeafe; border: 1px solid #93c5fd; border-radius: 7px; }

Rendered output

Observe: The direct children now sit in a row, with the same width as their own contents plus padding.

The flex parent creates the formatting context; its direct children become items arranged along the main axis.

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

• display:flex on an element only makes its direct children flex items.
• A flex row does not automatically wrap; long content may overflow if items cannot shrink enough.

Add a fourth flex item and change flex-direction to column. Identify how main and cross axes change.

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

Flexbox is a one-dimensional layout model: choose a main axis and control its flex items.

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