CSS Flexbox Layout Examples

Flexbox is especially useful for toolbars, headers, action rows and compact sets of cards.

In a toolbar, display:flex and align-items:center align controls. margin-inline-start:auto can push a later item to the end of the row. For card sets, flex-wrap:wrap and flex:1 1 150px allow items to move into new lines.

When cards must share aligned columns, use Grid instead of forcing Flexbox to behave like a full two-dimensional system.

Flexbox distributes free space across a line; items can grow, shrink and wrap when available width changes.

Push a button to the inline end.

HTML

<header class="toolbar"><strong>Projects</strong><button type="button">+ New</button></header>

CSS

.toolbar { display: flex; align-items: center; gap: 12px; padding: 12px; background: #eff6ff; border-radius: 9px; } .toolbar button { margin-inline-start: auto; border: 0; background: #1d4ed8; color: white; padding: 9px 12px; border-radius: 6px; }

Rendered output

Observe: The New button sits at the far end without absolute positioning.

Cards share available width and wrap when necessary.

HTML

<div class="feature-row"><div><strong>Learn</strong><p>Lessons</p></div><div><strong>Practice</strong><p>Exercises</p></div><div><strong>Build</strong><p>Projects</p></div></div>

CSS

.feature-row { display: flex; flex-wrap: wrap; gap: 10px; } .feature-row > div { flex: 1 1 130px; min-width: 0; padding: 16px; border: 1px solid #99f6e4; background: #ccfbf1; border-radius: 8px; } .feature-row p { margin: 5px 0 0; }

Rendered output

Observe: Cards flex and wrap instead of overflowing the preview area.

Flexbox distributes free space across a line; items can grow, shrink and wrap when available width changes.

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

• A huge margin-left value is not a safe alignment technique.

• Flexbox does not guarantee that items on separate lines align into shared columns.

Add a fourth feature card and reduce the preview width to observe wrapping.

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

Flexbox is a simple first choice for one-dimensional application components.

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