secret
Last active

  • Download Gist
flexbox.md
Markdown

CSS Flexbox: Specification Unification

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).

September 2012 Candidate Recommendation

Browsers

  • Chrome 21 (prefixed)
  • Opera 12.1 (unprefixed)
  • Firefox 20 (unprefixed)

Resources

March 2012 Working Draft

Browsers

  • Chrome 17 (prefixed)
  • Internet Explorer 10 (prefixed)

Resources

July 2009 Working Draft

Browsers

  • Firefox 2.0? (prefixed)
  • Chrome 4.0? (prefixed)
  • Safari 3.1? (prefixed)

Resources

Additional Resources

Properties for Flex Containers

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.

Properties for Flex Items (children of Flex Containers)

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.

Values that differ between the specifications

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.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.