HTML & CSS / Adaptable interfaces / Lesson 7

Flexible one-dimensional layout

Use Flexbox for a row or column of related items while accounting for intrinsic sizes, wrapping, and source order.

About 4 min readContent reviewed 2026-10-25

On this page

Lesson goals

Identify main and cross axes
Build a wrapping action group
Test distribution with real variation

Identify main and cross axes

A flex container lays its direct children out as flex items along a main axis, with alignment on a cross axis. flex-direction chooses row or column, interpreted through writing mode and direction. justify-content distributes available space along the main axis; align-items controls cross-axis alignment. These properties are not permanent synonyms for horizontal and vertical centering. Use Flexbox when one-dimensional distribution is the main requirement, such as an action row or media object. A wrapping flex layout can form multiple lines, but each line distributes its own items rather than creating the shared two-dimensional tracks of Grid.

Understand basis, growth, and shrinkage

The flex shorthand controls growth, shrinkage, and basis. A basis provides a starting main size, then free or negative space is distributed according to the algorithm and constraints. flex: 1 is a useful shorthand in many cases, but it does not universally mean identical final widths regardless of content, padding, or minimum sizes. Long unbroken content can establish an automatic minimum size that resists shrinking. Inspect min-inline-size and the content’s wrapping policy rather than repeatedly increasing flex-shrink. Growth factors divide available extra space, not necessarily the whole container size, so compare like-for-like starting constraints when predicting results.

Build a wrapping action group

The first example uses flex-wrap and gap for navigation links. When available space narrows, links can move to another line without a fixed desktop width. The source remains a list of destinations in the intended order. Gap separates neighboring items without assigning external margins to every child. Keep targets large enough for their task and preserve a visible focus indicator; a neat alignment is not a complete interaction design. Avoid using row-reverse or order to make a sequence look correct when it contradicts reading and keyboard order. Fix the document’s intended sequence first.

html Wrapping actions

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wrapping actions</title>
<style>
.actions { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; } .actions a { display: block; padding: .6rem; }
</style>
</head>
<body>
<main><h1>Topics</h1><nav aria-label="Topics"><ul class="actions"><li><a href="#html">HTML foundations</a></li><li><a href="#css">CSS layouts</a></li><li><a href="#access">Accessible design</a></li></ul></nav><h2 id="html">HTML</h2><p>Structure.</p><h2 id="css">CSS</h2><p>Presentation.</p><h2 id="access">Access</h2><p>Usable interactions.</p></main>
</body>
</html>

Expected output

Navigation wraps when its items no longer fit one line.

Each list item is a flex item and may wrap to a new line. The links retain native navigation and document order.

Allow the right item to shrink

The second example contains a fixed-size badge and a flexible text area. min-inline-size: 0 allows that area to shrink below its automatic minimum where the component requires it, and overflow-wrap handles the long token. Those two rules address different layers: the flex item’s sizing constraint and the text’s line-breaking behavior. Setting only one can leave overflow elsewhere. A real image can play the badge’s role when its aspect ratio and alternative text are appropriate. Check the actual parent chain because a nested flex item can continue imposing its own automatic minimum even after an inner paragraph is fixed.

html Shrinkable item

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shrinkable item</title>
<style>
.record { display: flex; gap: 1rem; max-inline-size: 32rem; } .badge { flex: 0 0 3rem; } .text { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
</style>
</head>
<body>
<main><h1>Flexible record</h1><article class="record"><span class="badge">A7</span><div class="text"><h2>Reference</h2><p>averylongsyntheticreferencewithoutspaces0123456789</p></div></article></main>
</body>
</html>

Expected output

A stable badge beside shrinkable, wrapping text.

The badge does not shrink; the text area can shrink and wrap its long content. Both sizing and line breaking are explicit.

Test distribution with real variation

Test an empty state, one item, several items, longer translations, and a narrow viewport. A row that looks balanced with three short English labels can fail with Arabic or a zoomed interface. Flex alignment does not add semantics or automatically create equal accessible targets. If each row needs columns that align across rows, consider Grid instead of forcing each flex line into a shared pattern. Use developer-tool overlays to inspect axes and item sizes, then verify keyboard traversal and text selection. The successful layout should explain how space is shared and what happens when the content cannot fit on one line.

Common errors and fixes

A flexible item still overflows

Why it happens: Its automatic minimum is larger than available space.
How to fix it: Inspect and deliberately reduce the relevant minimum size.
Prevent it next time: Test long unbroken content in nested items.

Items do not align into shared columns across rows

Why it happens: Each wrapped flex line distributes space independently.
How to fix it: Use Grid when cross-row tracks are required.
Prevent it next time: Choose layout from relationships rather than habit.

Visual order differs from Tab order

Why it happens: CSS order rearranged presentation only.
How to fix it: Restore coherent source order.
Prevent it next time: Review keyboard order after layout changes.

Check your understanding

1. Why does flex-shrink: 1 not guarantee that every label fits?

Show worked solution

Shrinkage remains constrained by minimum sizes and intrinsic content. Inspect the item’s minimum inline size and whether its content can wrap. Allow a deliberate minimum reduction where appropriate, or wrap the group; do not hide essential label text merely to preserve one row.

2. Select Flexbox or Grid for a toolbar and for a comparison table of aligned cards.