Logo Francesco Castronuovo, Webflow designer and developer.
Francesco
Castronuovo

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

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

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.

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 five 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.

Grid-ish layout: basic setup.

As we might expect, the five 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 five containers inside our flex-container element shrink down to the smallest size they can get, because the shrink option is on for flexbox children.

Grid-ish layout: flex container property set to flex.

As we did in the previous article of this series, we select one of the columns – each one of them has the flex-container__flex-column class applied – and customize the flex child sizing property. This time, though, we set the basis property to a fixed value - say, 200 px - and we set a value of 1 for the Grow property.

Grid-ish layout: children basis sizing property set to 200px.

Is there any difference from what we saw in the previous post? Not at all. The magic starts when we select the flex-container element and set its layout children property to wrap.

Grid-ish layout: flex container children property set to wrap.

Setting the property value to wrap, we explicitly tell our content to go to another row if the available room is not enough. Basically - with our current settings - each column wants to be at least 200 px wide, but they are allowed to grow so - when the content breaks to the next line - it takes up all the available space.

Magic reveals all its power when we try to resize the window. If we progressively enlarge the width of the window, we end up having all columns side by side.

Gridish layout: by enlarging the window, children will get side by side

On the other hand, if we keep on reducing the width of the window, columns will eventually stack on top of one another.

Grid-ish layout: by reducing the size of the window, children will stack on one another.

The takeaway here is that you can create a fully-responsive layout without any media queries at all.

This layout could not be the best solution in every situation, but it's really awesome having a layout that adjusts itself on the fly, without the need of further modifications based on the screen the content will be displayed on.

And the second wish is served! See you next time for our third and last wish: a versitile content-and-sidebar layout.

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