Flexbox Design Patterns

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.

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

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.

Exploiting the gap property

The gap CSS property sets the gaps between rows and columns.

Here we will apply the gap property to all our flexbox layouts, by using a tiny bit of custom code.

Custom code inside

Equal columns. At all times

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.

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

Grid-ish layout

Content-and-sidebar layout