Css3 Flexible Box Layout

1. Jason

2. Flexible Box Layout Module
 Orientation
 Display order
 Alignment
 Flexibility
 Packing along the box axis

3. display:box
 display:box;
 display:-moz-box;
 display:-webkit-box;

4. box-orient
 A box may lay out its children either horizontally
or vertically.
 Applies to: box elements
 Value
box-orient : horizontal
box-orient : vertical
box-orient : inline-axis (Initial)
box-orient : block-axis

5. box-direction
 The ‘box-direction’ property specifies the
direction in which children of a box are
displayed.
 Applies to: box elements
 Value
box-direction : normal (Initial)
box-direction : reverse

6. box-ordinal-group
 The children of a box element may be
assigned to ordinal groups using the ‘
box-ordinal-group’ property.
 Applies to: children of box elements
 Ex
box-ordinal-group: 1 (Initial)

7. box-align
 The box-align property specifies how a box's children
are placed and aligned along the direction
perpendicular to the box orientation.
 Applies to: box elements
 Ex
 box-align : start
 box-align : end
 box-align : center
 box-align : baseline
 box-align : stretch (Initial)

8. box-pack
 The box-pack property may be used to dictate
how any additional space along the box-axis
should be distributed between elements.
 Applies to: box elements
 Ex
box-pack : start (Initial)
box-pack : end
box-pack : center
box-pack : justify

9. box-flex
 The box-flex property is a floating point value
representing the flexibility of the element.
 Applies to: in-flow children of box elements
 Ex
box-flex: 0.0 (Initial)

10. Reference
 http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
W3C
 http://www.w3schools.com/cssref/css3_pr_box-align.asp
w3schools
 box-orient http://jsbin.com/eqokan/3/edit
 box-direction http://jsbin.com/ahozov/1/edit
 box-ordinal-group http://jsbin.com/ahozov/2/edit
 box-align http://jsbin.com/elukix/1/edit
 box-flex http://jsbin.com/utizuz/3/edit
 box-pack http://jsbin.com/osupen/1/edit