no way to compare when less than two revisions

Differences

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


Previous revision
spec:flexbox-2009-2011-spec-property-mapping [2014/12/09 15:48] (current) – external edit 127.0.0.1
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 by 127.0.0.1
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki