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 (**)
(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.