We’re happy to announce the launch of our new flexbox course, Cracking the Case With Flexbox! There are two major benefits to using flexbox: You will be able to do more with layouts, and you will write less code to create them. I’m so confident those are true that I’d suggest you stop reading right here and use the time you’d take to read this to start Level 1 instead. If you need a little more convincing, though, let’s talk about how this spec came about.
Learning by What Others Do
A few years back, someone had the awesome idea to crawl tens of thousands of sites and find patterns in markup. That lead to the semantic HTML5 elements like
footer, etc. While I can’t prove it, it seems very likely that layout patterns were reviewed in a similar way. The flexible box layout module is the first specification “optimized for user interface design.” This is done by a combination of a direct relationship between an element and its child elements as well as controlling spacing in two dimensions.
Writing Less Code
Equal height columns are a UI pattern that you’ll see on many sites. Before flexbox, there was no explicit way to create them with CSS. We’re a creative community, so we came up with many workarounds. There are more, but I’ll show one version.
overflow: hidden;to the container so it won’t collapse with child items that use
float: leftand a
widthto child items.
- Add jQuery (optional, you could write in vanilla JS).
- Add IDs to the child items.
Using flexbox, we reduce that to 2 steps - Add
display: flex; to the container. - Add
flex-basis for the column widths.
Another popular pattern you’ll come across is vertically centering content. Taking our previous example, let’s look at what it would take to center the smaller amount of text. This is a very creative CSS hack:
position: relative;to the column container.
position: absolute; top: 50%; transform: translateY(-50%);.
That hack has served us well, but luckily we have a spec intended to handle it instead of altering position. To vertically center the text using flexbox:
display: flex; align-items: center;to the column container.
Okay, it’s only a little bit less code, but it’s more versatile. The CSS hack can’t be applied to both columns because of the absolute positioning, but the flexbox approach will center both columns.
One of the most interesting things in the spec is the ability to reorder the display of content. Again, we have workarounds or hacks that allow us to do it now, but flexbox makes it so easy.
Let’s look at a popular layout, where an article has a sidebar to the left of the content. On small screens, the popular approach is to have these two items stack. Since source order determines the order that they will display, right now the sidebar of links would display before the article content.
Again, there are creative workarounds for this, but we don’t need them with flexbox. To reorder this example, we can:
order: 1;on the
- Reset to
order: 0;for large screens.
One of the greatest things about flexbox is that you can sprinkle a little in here and there as you see fit. You could use it in one layout component, a few, or build an entire site using flexbox. You might say it’s flexible.
We’ve just scratched the surface with these examples, but the spec is small and the course is short — you can start building your own things within an hour! Play through our flexbox course, Cracking the Case With Flexbox, to learn more — and be sure to let us know what you build in the comments below!