Differences

This shows you the differences between two versions of the page.

Link to this comparison view

spec:flexbox-2009-2011-spec-property-mapping [2014/12/09 15:48] (current)
Line 1: Line 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. //
 
spec/flexbox-2009-2011-spec-property-mapping.txt · Last modified: 2014/12/09 15:48 (external edit)
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki