===== 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. //