Build one-dimensional layouts with flexbox

Choose flexbox for one axis

Flexbox arranges direct children along a main axis and aligns them along a cross axis. It is a strong fit for navigation rows, button groups, toolbars, media objects, and card rows where one dimension drives the relationship. Grid is usually clearer when rows and columns must align together.

The distinction is about the layout problem, not a ban on wrapping. A flex row can wrap into several lines, but each line distributes its items independently. If column tracks must stay aligned from one row to the next, use grid.

Build a resilient row

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.actions > * {
  flex: 0 1 auto;
}

The container establishes a row, allows wrapping, and creates spacing without child margins. The items keep their preferred size but may shrink. Use real links and buttons inside; flexbox controls arrangement, not semantics.

Understand the axes

flex-direction defines the main axis. In a row it follows the writing mode's inline direction; in a column it follows the block direction. justify-content distributes free space on the main axis. align-items aligns items on the cross axis. Memorizing “horizontal” and “vertical” fails when direction or writing mode changes, so name the axes instead.

Use logical properties such as margin-inline-start when the intent follows text direction. Avoid pushing one item with an unexplained auto margin unless the resulting grouping remains clear in right-to-left and narrow layouts.

Predict flex sizing

The flex shorthand combines growth, shrinkage, and basis. flex: 1 commonly creates equal distribution from a zero basis, while flex: 1 1 16rem gives items a meaningful preferred size and lets them grow or shrink. The correct basis comes from content and task needs, not a copied recipe.

Flex items have an automatic minimum size. A long URL, code token, image, or nowrap descendant can prevent shrinking and push the page wider than the viewport. Set min-width: 0 on the item that must shrink, wrap prose safely, or bound overflow within the component. Do not hide overflow on the entire page.

Preserve source order

The order property and reverse directions can change visual order without changing DOM reading or sequential focus order. That mismatch is easy to miss with a pointer and disorienting with a keyboard or screen reader.

Write the meaningful sequence in HTML. Use flexbox to arrange independent items, not to repair source that was authored for one screenshot. If a card needs its heading before its image in one layout and after it in another, first decide whether both sequences genuinely preserve meaning. Often the design should change rather than the document order.

Align without damaging controls

Stretching is the default cross-axis behavior for many flex items. It can be useful for equal-height cards but harmful for intrinsic controls or media. Choose alignment at the container, then use align-self for a real exception. Fixed heights are rarely necessary and break with translated text, validation messages, zoom, and larger default fonts.

gap creates consistent space between items and wrapped lines. It does not add outer space around the group. Keep focus outlines clear of clipping containers, and ensure wrapped buttons remain distinguishable rather than merging into an unlabeled control cluster.

Common failure patterns

• Everything uses flex: 1. Content that should size intrinsically becomes equally wide. Set deliberate growth and basis per item role.
• The page scrolls sideways. An item cannot shrink below its automatic minimum. Find the deepest wide child and address it locally.
• Visual and keyboard order diverge. Remove order or reverse direction and fix the HTML sequence.
• Wrapped navigation has awkward gaps. Space distribution applies per line. Use start alignment and an explicit gap.
• Equal-height cards clip text. Fixed heights fight content. Allow intrinsic growth and align the card internals instead.

Verify and practice

At 320 CSS pixels, resize slowly and watch when the row wraps. Test long labels, long URLs, translated text, 200% zoom, right-to-left direction, and large default fonts. Tab forward and backward through the items while watching visual order. Inspect each item's flex basis and minimum size in the layout panel.

For practice, build a header containing a wordmark, navigation list, and one action. Keep the DOM in reading order, allow the navigation to wrap, and avoid using order. Then change the writing direction and confirm spacing and grouping still make sense. Finally, replace the row with a column at the content-pressure point and verify no interactive target is hidden or clipped.