New feature: CSS3 flexbox support

The most powerful and intuitive layout module CSS has to offer is now yours, in Webflow.

John Moore Williams
April 13, 2016
Announcements

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

Flex parent UI
Flex child UI

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.

‍The magic that happens when you set your container to display: flex.

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.

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.

Go, play.

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.

Flexbox support is looking pretty good.

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!

John Moore Williams

Head of Content Strategy at Webflow. Nice to meet ya. Follow me @JohnAMWill.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.