Building Layouts with Flexbox

Combine the Flexbox fundamentals to build simple reusable interfaces rather than isolated demo boxes.

A navigation row uses display:flex, align-items:center and a deliberate gap. A card collection often uses flex-wrap:wrap with each card declared flex: 1 1 160px or another suitable basis. The basis sets a preferred sizing starting point, not a guarantee of exact dimensions.

For real interfaces, use min-width:0 when content must shrink, and choose a wrapping strategy before introducing many media queries.

Flex sizing and wrapping produce adaptable rows; each direct child participates as an item.

Use margin-inline-start:auto to push one item toward the end.

HTML

<header class="site-header"><strong class="brand">SampleSite</strong><a href="#articles">Articles</a><a href="#about">About</a><a class="subscribe" href="#subscribe">Subscribe</a></header>

CSS

.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; max-width: 450px; padding: 13px; background: #f1f5f9; border-radius: 9px; }
.site-header .brand { color: #1d4ed8; margin-right: 8px; }
.site-header a { font-size: 13px; color: #334155; }
.site-header .subscribe { margin-inline-start: auto; padding: 7px 10px; background: #1d4ed8; color: white; border-radius: 6px; text-decoration: none; }

Rendered output

Observe: The Subscribe action occupies the row end if enough space remains; the header can wrap when narrow.

Allow sibling cards to grow and wrap based on their preferred base size.

HTML

<section class="feature-row"><article><strong>Fast</strong><p>Simple loading.</p></article><article><strong>Clear</strong><p>Readable content.</p></article><article><strong>Flexible</strong><p>Layouts that adapt.</p></article></section>

CSS

.feature-row { display: flex; flex-wrap: wrap; gap: 10px; max-width: 430px; }
.feature-row article { flex: 1 1 115px; min-width: 0; padding: 14px; border: 1px solid #cbd5e1; border-radius: 9px; background: #f8fafc; }
.feature-row strong { color: #1d4ed8; }
.feature-row p { margin: 6px 0 0; font-size: 13px; }

Rendered output

Observe: The cards use available width and can wrap into new lines instead of forcing fixed-width columns.

Flex sizing and wrapping produce adaptable rows; each direct child participates as an item.

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

• Navigation must remain keyboard-accessible; visual flex layout does not create link semantics.
• Fixed item widths plus large gaps can overflow; use flex basis and wrapping together.

Change feature cards to flex:1 1 175px and resize the preview width. Compare when the layout wraps.

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

Combine alignment, flexible sizing and wrapping to create real interface rows.

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