Why Flexbox?

in Front-end

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 header, 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.

  • Add overflow: hidden; to the container so it won’t collapse with child items that use float.
  • Add float: left and a width to child items.
  • Add jQuery (optional, you could write in vanilla JS).
  • Add IDs to the child items.
  • Use JavaScript to loop over the IDs, get each height, and then apply the height to each item with a class.

See the Pen Why Flexbox - Equal Heights CSS + JS by Code School (@codeschool) on CodePen.

Using flexbox, we reduce that to 2 steps - Add display: flex; to the container. - Add width or flex-basis for the column widths.

See the Pen Why Flexbox - Equal Heights Flexbox by Code School (@codeschool) on CodePen.

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:

  • Add position: relative; to the column container.
  • Add position: absolute; top: 50%; transform: translateY(-50%);.

See the Pen Why Flexbox - Vertical Centering CSS by Code School (@codeschool) on CodePen.

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:

  • Add 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.

See the Pen Why Flexbox - Vertical Centering Flexbox by Code School (@codeschool) on CodePen.

Doing More

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.

See the Pen Why Flexbox? Order in CSS by Code School (@codeschool) on CodePen.

Again, there are creative workarounds for this, but we don’t need them with flexbox. To reorder this example, we can:

  • Set order: 1; on the .sidebar by default.
  • Reset to order: 0; for large screens.

See the Pen Why Flexbox? Order in CSS by Code School (@codeschool) on CodePen.

Getting Flexible

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!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Dan Denney

I’m a seriously good copy and paster. Front-end dev for @codeschool, lover of all things web design/dev related and founder of @frontendconf.

Might We Suggest

Styling Text With SVG Filters

in Front-end

If you look at a US dollar bill up close, there are a lot of typographic niceties going on: the huge numbers in the corners, the beefy capitals across the top and bottom, and even the vibrant serial numbers on each half of the bill.