This is an old revision of the document!
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 | <number> | 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 | <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.
(**) “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.