An Event Apart: Using Flexible Boxes

by Luke Wroblewski August 9, 2011

In his Using Flexible Boxes presentation at An Event Apart in Minneapolis, MN 2011 Eric Meyer outlined how you can start using the CSS flex-box specification now and how to take into account the limitations & inconsistencies that currently exist when you do so. Here are my notes from his talk:

  • Flexible boxes are something that you can add to your toolkit now. Thanks to browser support this is more possible than you think.
  • Browsers currently support the 2009 specification. There are ways to apply flex boxes now and account for browsers that don't support flex boxes.
  • Setting an element to display:box sets it's children to flexible boxes. Not their children.
  • Changing the display style to “box” moves you into flex-box layout mode. You need all the vendor prefixes to make it work. This looks kind of like creating a table row without table markup but it’s not really.
  • A set of list items with a display of "box" will have equal heights by default. If you set an element to display "box", all of the children become potentially flexible boxes as well.
  • Box-orient: horizontal or vertical sets how the flex boxes lay out.
  • Box-pack: center declared on the containing element centers boxes within the container. This is not implemented properly across all browsers (Gecko rendering engine has issues). WebKit seems to be more consistent (and right according to the spec) in how it applies flexible boxes.
  • When moving from a standard float-based layout to flex box –keep your margins, padding, etc.
  • One way flexible boxes are not like table cells: you can give them margins, which you can't apply to table cells.
  • Flexible boxes divide available space evenly among boxes but they apply this additional space to the exiting width of each box.
  • On the containing element (a list item within a list for example), setting box-flex: 1 makes it flexible. If you set two flexible boxes to 1 and one to 2, they divide the available space among them based on these ratios.
  • The box flex value is a number not an integer. The default is 0.0. Once you set to 1, the boxes flex to fill the available space within their container. If they were images, they would get stretched.
  • We live in fear of float-drop. If you go one pixel over in your row width, things can fall below the element. To take away the risk of overflow, apply margins to li + li in flex box layouts.
  • If the width of the margin box adds up to a value larger then the width of containing block, then flexible children shrink as much as necessary to prevent overflow.
  • With flex box layout, you have to be careful not to squish elements by mistake or stretch them to wide as they will not adapt properly in Gecko (currently).
  • Box-lines (which could fix this) is not supported by any browsers except Internet Explorer DR 10. So it's not ready for use yet.
  • Box-direction: reverse switches the order of an item list without effecting the source markup order. Apply this to the containing element. Also be aware that margins might be incorrect when you reverse the order.
  • Box-ordinal-group: allows you to reposition items in a container. The ordinal group order takes precedence over markup source order. Within each ordinal group, boxes are laid out in source order unless you set them otherwise using box-direction.
  • When using flex box for a 3-column layout, apply padding and margins to the center column to avoid layout issues. This also helps if you reverse order, as the elements can be pivoted around the center column.
  • Ordinal group allows you to reposition elements along the vertical axis. You can use this to place elements like a footer differently based on media queries.
  • What about old browsers? Opera (no support at all), FireFox 3, Safari 3, IE (pre 9). If you use flex-box, you can apply float in these browsers. But this doesn’t work in WebKit (no idea why. it could be a bug).
  • You can use media query screen and vendor-specific prefixes to unfloat things to fix layout in WebKit.
  • Sadly the entire flex-box specification is being re-written and uses a whole new system of syntax, values, etc. In the new system, there is no name collision in the 2011 specification. So you can use the 2009 specification now. Likely the 2009 specification will likely be supported for the next 5 years. FireFox uses flex-box for XUL layouts.
  • Pluses of flexible boxes: table-like layout associations, size changes based on container's size, source-independent ordering, fairly simple fallbacks to floats (or other layout techniques)
  • Minuses of flexible boxes: restricted (by browsers) to a single line, changes of size evenly distributed instead of scaled, some browser quirks, fallbacks require some grotty proprietary media querying