In his Using Flexible Boxes presentation at An Event Apart in Atlanta, GA 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:
- 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.
- When moving from a standard float-based layout to flex box –keep your margins, padding, etc.
- 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 in how it applies flexible boxes.
- 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.
- 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).
- You can use media query screen and vendor-specific prefixes to unfloat things to fix layout.
- Sadly the entire flex-box specification is being re-written and uses a whole new system. 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.