If you’ve ever struggled with the box model, cursed the complexities of floats, tried to build your own Holy Grail layout, or just know Adobe Illustrator’s align and distribute tools inside out, you’re going to love our latest new feature: flexbox.
So, what’s flexbox?
Put simply, flexbox distributes elements along a single column or row, and gives you a variety of tools to control how that distribution works.
It was created specifically to replace all the float- and (gasp!) table-based hacks web designers and devs have “counted on” for years now.
Or, to put it in the words of the specification’s author:
My goal in doing Flexbox and later Grid was to replace all the crazy float/table/inline-block/etc hacks that I’d had to master as a webdev. All that crap was (a) stupid, (b) hard to remember, and (c) limited in a million annoying ways, so I wanted to make a few well-done layout modules that solved the same problems in simple, easy-to-use, and complete ways.
–Tab Atkins Jr., author of the Flexbox and Grid specs
One thing to note: flexbox really shines when you’re using it to control how specific sections of your site display, and not so much for whole-page layouts.
Using flexbox in Webflow
Our flexbox UI packs a lot of power into two simple modules: one for the “flex parent” and another for the parent element’s “flex children.”
To get started, you just need a container element (like a Section or … Container) that’s set to display: flex.
Then, any elements you place inside that container will distribute themselves horizontally by default (but you can switch that so they display vertically), and in the same order as the source code (though, again, you can reverse that. They’ll also try to stick to one line, so if you don’t want that, just tick the “Wrap Children” checkbox and they’ll flow on to multiple lines as needed.
From there, it’s all about playing with your alignment, sizing, and display order options. Just keep in mind that the parent settings affect all children, but you can override the parent behavior on specific children to easily achieve all kinds of complex layouts.
But I won’t try to teach you all the ins and outs of flexbox right here and now. Instead, check out these 3 ways to learn flexbox in Webflow.
Master the basics of flexbox in 28 increasingly challenging — and fun!— levels, without writing a line of code.
3 ways to learn flexbox in Webflow
While flexbox is intuitive and very easy to use, it can take some time to wrap your head around it if you’re used to thinking in terms of the box model. That’s why we created 3 ways to learn all about it.
1. The game: Learn Flexbox in Webflow
There’s nothing like learning by doing.
2. The documentation: flexbox guide
If you’d rather be reading (like me), our own Gadzhi Kharkharov, designer extraordinaire, wrote up a rather brilliant guide to flexbox.
3. The video course: designing with flexbox
Follow along with our own Mat Vogels as he walks you through how to build all the layouts from our flexbox page.
Browser support for flexbox
If you're wondering how safe it is to use flexbox, Can I Use assures us it's pretty well-supported.
What will you build with flexbox?
We can’t wait to see what you create with this new feature, so share your links in the comments below, on Twitter, or Facebook—just don’t forget the #MadeInWebflow hashtag.
If you do, you might just make it into our upcoming showcase of flexbox-powered layouts made in Webflow!
Oh, and as some of you eagle-eyed Webflow users noticed, we built our free ebook Web Design 101 with the help of flexbox—check it out!