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.

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.