Webflow · Flexbox design patterns

Three patterns.
Room to adapt.

Equal columns, a fluid card layout and content with a sidebar. Each example has its own container so changes stay within the pattern you are exploring.

Updated 27 October 2026. Card basis and sidebar minimum now follow the video’s 13rem example, replacing this project’s earlier 240px values. The visual layout has also been refreshed.

Equal columns

Use the same visual weight for a short message and a longer one. Children share the same basis and shrink settings; the container wraps from Tablet down.

One clear point

A short message.

Shared space

A longer description makes the layout visible: the amount of text does not decide the intended column width in this controlled example.

Ready to reuse

Add another item while keeping the same layout rule.

Container: academy-flex-columns. Children: academy-flex-column, Grow 0 / Shrink 1 / Basis 100%, Min W 0. Desktop: no wrap. Tablet and below: Wrap down. Breakable content and equivalent box sizing remain important.

A fluid card layout

Items wrap as space runs out. The last row can expand, so this pattern does not promise aligned columns between rows.

01 · Project

A first idea.

02 · Content

Material to organize.

03 · Structure

Relationships between elements.

04 · Style

A shared visual language.

05 · Review

A result to inspect.

Container: academy-flex-cards, Flex row / Wrap down / Gap 16px. Children: academy-flex-card, Grow 1 / Shrink 1 / Basis 13rem. The gap participates in line formation; the row count follows the available space.

Content and sidebar

Keep a clear primary area and a secondary reference. The minimum protects the sidebar, and Wrap lets the two areas move onto separate rows.

Main content

An article, guide or explanation belongs here. This content makes the relationship between the two areas visible.

When horizontal space becomes limited, each area gets its own readable row.

Container: academy-flex-sidebar, Flex row / Wrap down / Gap 0. Content: Grow 1 / Shrink 1 / Basis 70%. Sidebar: Grow 1 / Shrink 1 / Basis 30%, Min W 13rem. Internal padding separates the content without adding a gap to the initial 70/30 comparison.

Flexbox Patterns

Three flexbox design patterns to use for your project right away.

Equal columns. At all time.

We all found ourselves in the situation where we needed to structure a section content into a specific number of columns, all with the same width, no matter the content we put inside each element.

There are many ways to accomplish this task. One neat way is by using the magic of flexbox.

Lorem ipsum dolor sit amet, adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Grid-ish layout

One of the greatest things about flexbox is that it strongly empowers our capability of building fully-responsive layouts without the need of media queries.

Here is how we can build a layout that resembles CSS grid and is fully responsive. All by just using flexbox and — of course — the fairy dust of no-code.

Content-and-sidebar layout

Two-column layouts are very common on the web. In general, they consist of a header, a footer, and two columns in the content area. One column is for main content while the other is a sidebar.

Here is how we can build a fully responsive layout for the content area. With flexbox and Webflow, of course.