Flex Direction and Wrapping

Flex-direction changes the main axis; flex-wrap decides whether items remain on one line or move onto additional flex lines.

flex-direction: row creates a row-based main axis, while column creates a column-based axis. row-reverse and column-reverse reverse the visual direction, but do not reorder the underlying DOM.

flex-wrap: wrap permits multiple flex lines when items cannot all fit; nowrap is the default. The shorthand flex-flow combines direction and wrap. Keep logical reading and keyboard order intact.

Changing direction reorients main and cross axes; wrapping adds flex lines without changing source order.

Use column direction with equal spacing.

HTML

<div class="direction-demo"><div class="tag">Plan</div><div class="tag">Build</div><div class="tag">Review</div></div>

CSS

.direction-demo { display: flex; flex-direction: column; gap: 8px; max-width: 220px; background: #f8fafc; padding: 10px; }
.tag { background: #dbeafe; border-radius: 7px; padding: 9px 12px; }

Rendered output

Observe: Each item occupies a new vertical position because the main axis is now a column.

Let items flow onto additional rows when the container is narrow.

HTML

<div class="direction-demo"><span class="tag">HTML</span><span class="tag">CSS Layout</span><span class="tag">Accessibility</span><span class="tag">Responsive Design</span></div>

CSS

.direction-demo { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; max-width: 255px; background: #f8fafc; padding: 10px; }
.tag { flex: none; background: #ccfbf1; padding: 9px 12px; border-radius: 999px; }

Rendered output

Observe: The longer tags wrap to later flex lines while retaining their source order.

Changing direction reorients main and cross axes; wrapping adds flex lines without changing source order.

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

• row-reverse or column-reverse changes visual order, not screen-reader or keyboard focus order.
• Wrapping does not automatically make every item equal width.

Change max-width from 255px to 180px. Count the resulting rows and explain why flex-wrap matters.

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

Use direction to choose an axis and wrap to handle limited space without rewriting HTML.

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