Logo Francesco Castronuovo, Webflow designer and developer.
Francesco
Castronuovo

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

Francesco Castronuovo, Webflow designer and developer.
Francesco Castronuovo
7
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 first blog post, we are going to dive into the first one.

Equal columns. At all times

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.

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 three 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: three div block elements that stack on top of each other.

As we might expect, the three 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

Here is where the magic begins. We select the flex-container element and set its layout display property to flex. By default, the three containers inside our flex-container element shrink down to the smallest size they can get, because the shrink option is on on flexbox children.

Flexbox default layout: the three containers shrink down.

Let us put some randomly split text inside each column of our flex-container element. What we can immediately see is that we end up with three columns that are not of the same size. In particular, the column in the middle is wider than the other two, because there is more content in it. This is definitely a result we can't be happy with.

Flexbox layout: randomly split text inside each column.

The easiest way to make sure all three columns have the same width so that we can have three equal columns at all times, is to select one of the three column – each one of them has the flex-container__flex-column class applied – and customize the flex child sizing property by setting the basis to 100%. We can clearly see that they now have all the same width. This will of course work no matter the number of columns we have in our layout – we could encounter some issues if we squeeze the columns too much.

Flexbox layout: set flex child basis property to 100%.

The reason magic happens is because setting flex basis to 100% makes each column want to take up all the available space, but they are allowed to shrink down, because flex shrink is on by default.

One thing to avoid

If we want to make sure our design will never break, we should not set the flex basis property to a value that depends on the number of columns we have in our layout. In this example we would have 100% / 3 = 33 %, but this value definitely wouldn’t work for a number of columns other than 3.

Flexbox layout: set flex child basis property to 33%.

And the first wish is served! See you next time for our second wish: a juicy grid-ish flex layout.

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