| Previous revision |
— | spec:flexbox-2009-2011-spec-property-mapping [2014/12/09 15:48] (current) – external edit 127.0.0.1 |
---|
| ===== 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 (<nowiki>**</nowiki>) \\ (horizontal, reverse) -> rl (<nowiki>**</nowiki>) \\ (vertical, normal) -> tb (<nowiki>**</nowiki>) \\ (vertical, reverse) -> bt (<nowiki>**</nowiki>) \\ (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 | <number> | width \\ height \\ margin \\ padding | flex() function \\ 'fr' unit | Extended | width:3em;box-flex:2.0 -> width:flex(3em 2.0) (<nowiki>***</nowiki>) \\ //(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 | <integer> | //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 | <integer> | flex-order | <integer> | 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. // |
| |
| //(<nowiki>**</nowiki>) "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. // |