Keep nested axes and reading order straight

Build on the CSS introduction

Start from the CSS Flexbox introduction, where you learned to create a row or column. Now inspect a card with two levels: an outer column holding a summary and an actions group, and an inner row holding two buttons. The actions group is one item in the outer layout, while its buttons are items in a separate inner layout. Trace each relationship before choosing an alignment rule.

The outer container's main axis is vertical, so its justify-content distributes spare height between the summary and actions. The inner row's main axis is horizontal, so its own justify-content moves the buttons toward the end of their row. These declarations can have different visible directions at the same time. A nested container does not inherit flex-direction from its parent.

Visual order is another independent concern. Reversing the actions row moves the buttons but does not rewrite their DOM order. Try Tab inside the reversed preview: Save still comes before Share even if it appears on the right. Use logical source order for a real workflow. The comparison is a demonstration of the mismatch, not a recommendation to reverse controls.

What to remember first

Walk through an example

Use this HTML inside the body of a document and place the CSS in your linked stylesheet. The preview adds a dashed outline and card colors to make boundaries visible; those decorations do not control the layout. Its body has 16px padding on each side. Fixed preview widths are intentional: on a small screen, scroll inside the preview to inspect the whole experiment.

<div class="layout">
  <div class="item">Article summary</div>
  <div class="actions">
    <button type="button">Save</button>
    <button type="button">Share</button>
  </div>
</div>

.layout {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  justify-content: space-between;
  gap: 16px;
}
.item {
  padding: 12px;
}
.actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 8px;
}

The outer column separates summary and actions vertically; the inner row aligns Save and Share horizontally.

See it happen: try a small change

.layout {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  justify-content: space-between;
  gap: 16px;
}
.item {
  padding: 12px;
}
.actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 8px;
}

A common wrong turn

Applying the outer column's alignment rule to each button mixes two different containers. When debugging, inspect the button's immediate parent first. A layout that looks correct with a mouse can still be confusing if reversed visual order disagrees with keyboard order.

Try it in your own project

Copy the example into your local HTML and CSS files. Predict one change before saving and refreshing the browser. Use the interactive versions above to check your prediction, then explain which container, item, or track changed. The related playground offers extra practice with its supported controls; use your local files for properties it does not expose.

Go to the source

• MDN: Keep nested axes and reading order straight ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.