Flexbox Design Patterns in Webflow

By the end of this lesson you’ll have three Flexbox layout patterns you can drop into almost any project — even columns, a fluid grid-ish layout, and a content + sidebar structure. These aren’t flexbox theory; they’re the real patterns you’ve seen on dozens of sites, built step by step.

The goal isn’t to memorize settings. It’s to understand how four properties — flex-basis, flex-grow, wrap, and min-width — work together. Once that clicks, you stop copying values off tutorials and start designing layouts that are resilient, reusable, and hard to break.

Every pattern here uses the same simple building block: a flex-container (a div set to display: flex) with a few children inside. What changes between them is which of those four properties you turn on.

How it works

Even columns is for anything that should feel equally important — feature blocks, stat highlights, pricing plans. Drop a few children in a flex container and you’ll immediately see the problem: each column’s width follows its content, so the one with more text is wider. The fix is flex-basis: 100% on the children. That tells every column to push against the others with the same strength and claim an equal share of the container. The magic is that it’s count-agnostic: three columns or five, they stay perfectly even. It’s tempting to reach for 25% on a four-column row instead — don’t. A fixed percentage only holds for that exact number; remove one column and the row stops filling. 100% describes a system, not a fixed count.

Grid-ish layout is for cards, CMS collections, galleries — anything that should feel grid-like but stay fluid. Here the children get flex-grow: 1, which means “if there’s leftover space, you’re all allowed to take an equal share of it.” On its own that looks like even columns, so the real behavior comes from adding a flex-basis and enabling wrap on the parent. With flex-basis: 50%, only two items fit per row and the rest wrap below. Swap the percentage for a fixed value like 13rem and the items stay on one row while there’s room, then wrap naturally as the viewport shrinks — responsiveness almost for free. The tradeoff: you can end up with, say, three items on one row and one alone below, so it’s flexible rather than pixel-perfect.

Content + sidebar is for a clear primary/secondary hierarchy — a blog post with a table of contents, docs with a nav, a page with a persistent CTA. Put a content div and a sidebar div in a flex container, give both flex-grow, and set flex-basis: 70% on the content and 30% on the sidebar. On its own, shrinking the viewport just squeezes both — bad for the sidebar. So add a min-width to the sidebar (e.g. 13rem) and, the missing piece, enable wrap on the container. Now when space runs low the sidebar drops below the content and pops back up when there’s room. Swap the two if you want the sidebar on the left.

The thread running through all three: wrap is what turns a flex row into a responsive layout. Without it, children only shrink (and eventually overflow). With it, they reflow. Learn how flex-basis sets the starting size, grow shares the leftovers, min-width sets a floor, and wrap handles the overflow — and you can build almost any layout from these four.

How to use it

1. Even columns — add a flex-container (display: flex), drop in your columns, and set each column’s flex-basis to 100%. Add or remove columns freely; they stay even.
2. Make even columns responsive — select the container and enable wrap on the tablet or landscape breakpoint so narrow columns drop to the next line instead of overflowing.
3. Grid-ish layout — reuse the flex container (no wrap yet), give the children flex-grow: 1, then set a flex-basis — 50% for two-up, or a fixed value like 13rem for “as many as fit.”
4. Make grid-ish wrap — enable wrap on the parent so items flow onto new rows; preview and shrink the viewport to confirm they stack down to one column on mobile.
5. Content + sidebar — in a flex container, add a content div and a sidebar div, enable grow on both, and set flex-basis to 70% and 30%.
6. Protect the sidebar — give the sidebar a min-width (e.g. 13rem) and enable wrap on the container so it drops below the content on small screens and returns when there’s space.

Three patterns, four properties. More than any single layout, what you’re really taking away is how Flexbox thinks — and that’s what lets you design layouts that hold up as content and screens change.