Logo Francesco Castronuovo, Webflow designer and developer.
Francesco
Castronuovo

3 Ready-to-use Flexbox Design Patterns with Webflow. Part 3.

Francesco Castronuovo, Webflow designer and developer.
Francesco Castronuovo
16
June
2021
Flexbox

What is the difference between Webflow and Aladdin’s lamp? The latter only grants you three wishes. Not to lessen the genie too much, in this series we'll pick 3 ready-to-use flexbox design patterns, and see how to implement them with the phenomenal cosmic power of Webflow.

All the articles in this series are based upon an amazing video from Kevin Powell, building all these patterns with pure HTML and CSS.

In this third blog post, we are going to dive into the last one, a content-and-sidebar layout.

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.

The basic layout

We have a simple section in the body of our page. Inside this section, we have a simple div block element with a given width and a class with the name of flex-container – you can name it whatever you want.

Inside the flex-container div block we have two other div block elements, each one with given padding values – so they can take up some space – and a class with the name of flex-container__flex-column, to clarify the hierarchy. We styled them a bit so we can see something on the screen.

The basic layout: two div block elements that stack on top of each other.

As we might expect, the two div block elements stack on top of each other, because div blocks are block elements by default, so their boundaries tend to take up the full width of their parent element – At Webflow university, they have a great video, if you want to find out more about display settings.

Let there be flex

Now it's time to go flex. We select the flex-container element and set its layout display property to flex. By default, the two containers inside our flex-container element shrink down to the smallest size they can get, because the shrink option is on for flexbox children.

Flexbox default layout: the five containers shrink down.

Before we move on with our layout, we need to assign two combo classes, one to identify the div block hosting the actual content, and one for the div block that will serve as the sidebar. We call them flex-column--content and flex-column--sidebar, to clarify the hierarchy but - as usual - you can name them whatever you want.

flex-column--content and flex-column--sidebar combo classes are added to our columns.

The next step is customizing the flex child sizing property for each of the two columns. We set the Grow property to 1 and basis property to - for example - 70% and 30%, respectively.

Content-and-sidebar layout: set flex child grow property to 1 and basis property to 70% and 30%, respectively.

This will ensure that - no matter the size of the screen - we'll always have a 70-30 split. If we leave this structure as is, we could encounter some issues: sometimes the two columns might get too big, or too small. Lucky for us, there's a very easy way to prevent this from happening, we just have to have faith in the power of flexbox wrapping ability. And then add some size constraints. So, first thing first, we select the flex-container element and set its layout children property to wrap.

Content-and-sidebar layout: set layout children property to wrap.

Last but not the least, we set a minimum and maximum width for each of the two columns.

Content-and-sidebar layout: set minimum and maximum width for each of the two columns.

By doing so, our two columns will never grow too big and, when the size of the screen gets too narrow, they wrap to next line. The magic of the grow property now comes into play, by letting the two columns fill in all the available space.

Content-and-sidebar layout: when the screen size gets too narrow. the two columns wrap to the next line.

As in the second article of this series, the takeaway here is that you can create a fully-responsive layout without any media queries at all.

Our third and last wish is served! Maybe a little bonus content on how to build flexbox design patterns with Webflow will come shortly...

Want to learn more about flexbox and how it works within Weblow? You can dive into their lesson about flexbox at Webflow University.