Flexbox Patterns
Three flexbox design patterns to use for your project right away.
Three flexbox design patterns to use for your project right away.
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.
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.
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.