spec flexbox 2009 2011 spec property mapping

CSS Flexbox 2009/2011 Spec Syntax Property Mapping

This module had major changes between 2009 spec and current state. The following table shows mapping from old to new syntax.

2009 draft		Current draft		Equivalence	Mapping(*)	Notes
Property	Values	Property	Values
display	box inline-box	display	flexbox inline-flexbox	Exact	display:box -> display:flexbox display:inline-box -> display:inline-flexbox
box-align	start end center baseline stretch	flex-align	auto baseline	Close	Horizontal: box-align:start -> margin-bottom:auto box-align:end -> margin-top:auto box-align:center -> margin:auto 0 box-align:baseline -> flex-align:baseline box-align:stretch -> margin:0;height:auto Vertical: same with left/right margins
box-direction	normal reverse	flex-direction	lr rl tb bt inline inline-reverse block block-reverse	Close	(horizontal, normal) -> lr () (horizontal, reverse) -> rl () (vertical, normal) -> tb () (vertical, reverse) -> bt () (inline-axis, normal) -> inline (inline-axis, reverse) -> inline-reverse (block-axis, normal) -> block (block-axis, reverse) -> block-reverse	combined direction+orientation property can't be easily extended to define a multiline flexbox TODO:add issue, link to thread
box-orient	horizontal vertical inline-axis block-axis inherit
box-flex		width height margin padding	flex() function 'fr' unit	Extended	width:3em;box-flex:2.0 -> width:flex(3em 2.0) (*) (not possible) --> margin-right:auto	flex() function allows setting explicit preferred size, positive and negative flexibility; 'fr' unit is short for flex with zero preferred size: 2fr == flex(0 2fr). using flex() adds many combinations that were not possible in 2009 spec 'auto' value in margin or padding is equivalent to 1fr.
box-flex-group		deprecated		N/A		never implemented, agreed to be expensive and unnecessary
box-lines	single multiple	missing		None		http://lists.w3.org/Archives/Public/www-style/2010May/thread.html#msg172
box-ordinal-group		flex-order		Exact	box-ordinal-group:2 -> flex-order:2
box-pack	start end center justify	flex-pack	start end center justify	Exact	box-pack:value -> flex-pack:value

() Mapping shown for horizontal LTR flow. *

*(**) "box-direction:normal|reverse" picks up direction from writing mode, along given axis. There is no explicit LTR or RTL in 2009 draft. 6/2011 draft offers combinations that are either all physical (lr) or all logical (inline-reverse), so exact mapping is not possible *

(**) 2009 syntax is not clear on how to use specified width - as preferred or as final. implementations differ, this example assumes preferered. *