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.
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.
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.
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.
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.
On the other hand, if we keep on reducing the width of the window, columns will eventually stack on top of 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.
