Skip to content

Instantly share code, notes, and snippets.

@cimmanon
Last active April 7, 2017 20:04
Show Gist options
  • Save cimmanon/727c9d558b374d27c5b6 to your computer and use it in GitHub Desktop.
Save cimmanon/727c9d558b374d27c5b6 to your computer and use it in GitHub Desktop.

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

Browsers

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

Resources

Browsers

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

Resources

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment