Breaking Development: Is Flexbox the Future of Layout?

by July 22, 2013

In his presentation at Breaking Development in San Diego CA James Williamson walked through the benefits of Flexbox layouts on the Web and how to use the syntax today. Here's my notes from his talk on Is Flexbox the Future of Layout?.

  • Flexbox allows us to control the size, alignment, and order of elements on the Web. It's a powerful layout system for browsers.
  • Flexible: make things stretch or shrink to fit spaces.
  • Alignment: easy horizontal, vertical and centered alignment.
  • Source order independence: you can move elements around on the page.
  • Easy syntax: you can learn it quickly.
  • In 2009, there was a CSS spec that was basically a XUL port available in Firefox. In 2011, some of the browser vendors adopted a refined version the Flexbox syntax. In 2012, the spec reached stable recommendation status. So you can learn the syntax now.
  • To support Flexbox in production you need to know the differences between these versions and how to use vendor pre-fixes to make it work.
  • Flexbox is a new layout mode like block, inline, table, and positioned.
  • First define a flexible container. Every direct child in this element is now a flex item. Then establish a flow direction: row or column. Finally, align and order things how you like.
  • It's all about the axis: main and cross axis -are they going horizontal or vertical?
  • To set up a flexible container set display to flex, then set the flow direction you want.
  • Flexible properties: grow, shrink, and basis. Basis is where the calculation for where flexibility starts. If you leave this off, it sets to zero, which is different than auto.
  • Common flex values include: 0, auto, initial, and none. Or you can define ratios for the flexibility of each child.
  • To control display order, use integers to define what elements come first, second, third, etc.
  • To use source order independence for your entire page, you have to wrap everything in a flexible container. This requires some planning.
  • Stretch is the default box alignment which stretches vertical elements to be equal height but you can also align elements to the top, bottom, middle, or a combination.
  • If you are using flexbox, try to avoid margins. They can be problematic.
  • Don't overload your use of flexbox. Let the default order take over in most cases.
  • If you want to use Flexbox for your full page layout, think through how it will work beforehand.
  • Understand flex-basis: its critical to getting the results you expect.
  • Grid layout is coming soon and is probably a better fit for overall page layout. Flexbox is more likely to be useful for components within complete layouts.