Flexbox In Production: Patterns You'll Use Every Day

"Ten patterns cover 90% of layout work. Memorize them and stop reinventing."

1. Sticky Footer

Page has a header, main content, and footer. Footer should sit at the bottom of the viewport when content is short, and below the content when content is long.

body { display: flex; flex-direction: column; min-height: 100vh; } + main { flex: 1; }. Three lines.

2. Centered Modal (or Hero)

A box centered both vertically and horizontally in its container.

.container { display: flex; align-items: center; justify-content: center; min-height: 100vh; }. Or Grid place-items: center.

3. Navbar With Logo + Menu + Actions

Logo on the left, navigation menu, then user actions on the right.

Two approaches:

1. justify-content: space-between with the logo, menu, and actions as three direct children.
2. margin-left: auto on whichever middle group should push siblings apart (more flexible when you have 5+ children).

4. Equal-Width Button Row

Two or three buttons that share the row equally regardless of label length.

.btn-row { display: flex; gap: 0.5rem; } + .btn-row > button { flex: 1; }.

5. Truncating Chat Row

An avatar, a name + message, and a timestamp — all in a single row, with the message truncating gracefully when the row is narrow.

6. Card With Footer Pinned To Bottom

A card with title, body, and a CTA at the bottom. The CTA must sit at the bottom even when the body is short.

Make the card a flex column with a fixed height, give the body the natural size, and add margin-top: auto to the CTA.

7. Form Row With Inputs Of Varying Widths

A first-name + last-name + email row where first-name and last-name share equally and email takes twice as much space.

8. Aside + Main Layout

Fixed-width sidebar + flexible main. We saw this in lesson 3. display: flex with flex: 0 0 240px on the sidebar, flex: 1; min-width: 0 on main.

9. Tag/Chip Wrap

A row of tags that wraps to multiple lines when they don't fit.

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }. Each tag is auto-sized; the row wraps naturally.

10. Reorder On Mobile

A two-column layout (image left, text right) that switches to (text first, image below) on narrow screens.

Use order in a media query — but prefer restructuring with grid template areas when you can.

The Anti-Patterns You'll Encounter

• Nesting flex containers four levels deep to achieve a layout — almost always means Grid was the right answer.
• Using position: absolute for sticky footers — works but breaks when content is long enough to need scroll. Flexbox is the right tool.
• Using vertical-align: middle on flex children — it does nothing. Use align-items on the parent.
• Setting widths on flex children when flex would do it — flex: 1 is more flexible than width: 33.333%.
• Adding margin-right to every child except the last for spacing — use gap.

Pippa's Note