The flexbox module has been kicking around for quite some time. There are 3 different specifications that have been implemented in the major browsers. This is an overview of how to cover all of them. If you're interested in how to use flexbox, there are many fine articles out there (some have been linked below).
- Chrome 21 (prefixed)
- Opera 12.1 (unprefixed)
- Firefox 20 (unprefixed)
- MDN: Using CSS flexible boxes
- Dev.Opera: Flexbox — fast track to layout nirvana?
- Bocoup: Dive into Flexbox
- Chrome 17 (prefixed)
- Internet Explorer 10 (prefixed)
- NetTuts: An Introduction to CSS Flexbox
- [MSDN: Flexible box ("Flexbox") layout (Windows)](http://msdn.microsoft.com/en-ca/library/ie/hh673531(v=vs.85\).aspx)
- IE Test Drive: Flexin' (Demo)
- IE Test Drive: Hands On: CSS3 Flexible Box Layout (Demo)
- Firefox 2.0? (prefixed)
- Chrome 4.0? (prefixed)
- Safari 3.1? (prefixed)
- Smashing Magazine: CSS3 Flexible Box Layout Explained
- HTML5 Rocks: Quick hits with the Flexible Box Model
- Vanseo Design: CSS3 Flexible Box Model
- Flexbox polyfill
- Flexbox mixins for Sass - covers all 3 specifications
- CSS Tricks: "Old" Flexbox and "New" Flexbox
- CSS Tricks: Using Flexbox
- Flexy Boxes
| Standard | Mar 2012 | July 2009 | Description |
|---|---|---|---|
| flex-flow | flex-flow | N/A | Shorthand: flex-direction flex-wrap |
| flex-direction | flex-direction | box-orient & box-direction | Controls whether the main axis is vertical or horizontal and whether the flex items should be ordered normally or reversed |
| flex-wrap | flex-wrap | box-lines | Controls the wrapping of flex items |
| justify-content | flex-pack | box-pack | Distribution of extra space along the main axis |
| align-content | flex-line-pack | N/A | Distribution of extra space along the cross axis (only applies to multiline flex contaners) |
| align-items | flex-align | box-align | Alignment of items along the cross axis |
NOTE: Steven Bradley of Vanseo Design hints that no browser had a box-lines implementation as of August 29, 2011. Firefox is not expecting to support flex-wrap until Q2 of 2013.
- Stack Overflow: (CSS3 flex box) specifying multiple box-lines doesn't work
- Bugzilla@Mozilla: Support multi-line flexbox
- Bugzilla@Mozilla: implement box-lines property from css3-flexbox
- The Holbert Report: CSS3 Flexbox enabled in nightlies & ready for testing!
| Standard | Mar 2012 | July 2009 | Description |
|---|---|---|---|
| flex | flex | N/A | Shorthand: flex-grow flex-shrink flex-basis |
| flex-grow | N/A | box-flex* | The ratio the element is allowed to grow by when there's left over space available |
| flex-shrink | N/A | box-flex* | The ratio the element is allowed to shrink by when there's not enough space available |
| flex-basis | N/A | N/A | The prefered size for the element along the main axis |
| align-self | flex-item-align | N/A | The alignment of the item along the cross axis (overrides the value set via align-items on individual elements |
| order | flex-order | box-ordinal-group | The order the elements should appear, regardless of source order (ordering begins from 0) |
NOTE: The 2009 box-flex property is like a hybrid of flex-grow and flex-shrink from the Standard specification. Setting it as box-flex: 1 would be the same as flex-grow: 1; flex-shrink: 1 from the standard spec.
| Standard | Mar 2012 | July 2009 | Properties |
|---|---|---|---|
| flex | flexbox | box | display |
| inline-flex | inline-flexbox | inline-box | display |
| flex-start | start | start | justify-content, align-content, align-items, align-self |
| flex-end | end | end | justify-content, align-content, align-items, align-self |
| space-between | justify | justify | justify-content, align-content |
| space-around | distribute | N/A | justify-content, align-content |
| * | * | * | flex-direction |
| * | * | * | order |
NOTE: flex-direction takes a single value (row|row-reverse|column|column-reverse). To translate this to the 2009 spec, you need to use two properties: box-orient (horizontal|vertical) and box-direction (normal|reverse).
NOTE: order has a default of 0 while box-ordinal-group defaults to 1.