Flexbox in 2026: A Practical Guide for Real Layouts

Flexbox has been around long enough that most people think they know it, and then they hit a layout that fights back. The good news is the spec hasn’t changed much in years. What’s changed is how we use it, especially now that gap works everywhere, container queries let components respond to their own width, and Grid handles the two-dimensional stuff. This is a working reference, not a history lesson.

What Flexbox is actually for

Flexbox lays out items along a single axis. That’s the whole idea. Row or column, one direction at a time. The moment you catch yourself nesting three flex containers to build a grid, stop and reach for CSS Grid instead. I see this constantly in code reviews. A card grid built with flex-wrap and percentage widths is harder to maintain than four lines of Grid.

The rule of thumb I use: if I’m aligning things in a line, or distributing space between siblings, flexbox. If I’m defining rows and columns at the same time, Grid.

The properties worth memorizing

You don’t need all of them. These cover 95% of real work.

On the container

• display: flex starts it
• flex-direction sets the main axis (row, column, row-reverse, column-reverse)
• justify-content distributes along the main axis
• align-items aligns along the cross axis
• flex-wrap lets items wrap instead of squishing
• gap spaces items without margin hacks

On the items

• flex is shorthand for grow, shrink, and basis
• align-self overrides the container for one item
• order changes visual order (careful with accessibility, since it doesn’t change tab order)

The centering trick, and why it still matters

Vertical centering used to be the reason people hated CSS. Now it’s three lines.

.center {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100dvh;
}

Note the dvh unit instead of vh. On mobile browsers, 100vh includes the area behind the collapsing address bar, which causes content to jump. Dynamic viewport units fix that and have been broadly supported for a while now. If you’re still using 100vh for full-screen sections, that’s likely the bug your users are complaining about.

flex: 1 vs flex: auto vs flex: none

This trips people up more than anything else. The shorthand expands to flex-grow flex-shrink flex-basis.

/* grow to fill space, can shrink, starts from zero width */
flex: 1; /* 1 1 0% */

/* grow to fill space, can shrink, starts from content width */
flex: auto; /* 1 1 auto */

/* never grow, never shrink, size to content */
flex: none; /* 0 0 auto */

The difference between flex: 1 and flex: auto shows up when items have different content lengths. With flex: 1, every item gets an equal share regardless of content. With flex: auto, a longer item keeps more of its natural width. Neither is wrong. Pick based on what you want when the text lengths differ.

A real pattern: the sticky footer

This is the layout I build most often, and flexbox handles it cleanly.

body {
 display: flex;
 flex-direction: column;
 min-height: 100dvh;
 margin: 0;
}

main {
 flex: 1;
}

footer {
 /* sits at the bottom even on short pages */
}

Header and footer size to their content. The main element grows to eat the leftover space. No fixed heights, no absolute positioning, no JavaScript measuring anything.

Where flexbox and modern CSS meet

A few things that changed how I write flex layouts recently:

• gap works in flexbox now. No more margin-right on everything except the last child. This alone cleaned up a lot of old stylesheets.
• Container queries. A flex row can now respond to its parent’s width instead of the viewport, which matters for components reused in sidebars and modals.
• flex-wrap: wrap plus gap is a decent fallback for tag lists and button rows, but Grid’s auto-fit is usually better for card grids.
• Logical properties. margin-inline and padding-block play nicer with flex direction changes and RTL text than physical properties do.

Common mistakes I still see

• Using flexbox for page-level layout. Grid is the right tool for the overall page skeleton.
• Forgetting min-width: 0 on flex items. Text won’t truncate or wrap properly without it. This is the single most common flexbox bug in production code.
• Relying on order for layout. Screen readers and keyboard users follow DOM order, not visual order. Keep them in sync.
• Nesting for the sake of nesting. If a wrapper exists only to hold one child, it’s probably unnecessary.

If you’re working on a site and the layout keeps breaking at certain widths, it’s usually worth auditing whether flexbox is even the right tool for that section. I do a fair amount of Long Island web design work, and layout debugging is a big chunk of it. Most of the time the fix isn’t more CSS. It’s using the correct layout model.

FAQ

Should I use Flexbox or Grid in 2026?

Use Grid for two-dimensional layouts (rows and columns together) like page structure and card grids. Use Flexbox for one-dimensional layouts like nav bars, button rows, and centering a single element. They work well together, and most real pages use both.

Does gap work in Flexbox now?

Yes, and it has for a while. It’s supported in every current browser, so you can drop the old margin-based spacing hacks. Just set gap on the flex container and it spaces items on both axes when wrapping.

Why does my flex item overflow its container?

Flex items default to min-width: auto, which means they won’t shrink below their content size. Add min-width: 0 to the item and it will shrink and wrap or truncate as expected. This is the fix for the vast majority of flexbox overflow bugs.