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.