Upload
learningtech
View
103
Download
0
Embed Size (px)
DESCRIPTION
Css3 Flexible Box Layout
Citation preview
Jason
Flexible Box Layout Module Orientation Display order Alignment Flexibility Packing along the box axis
display:box
display:box; display:-moz-box; display:-webkit-box;
box-orient A box may lay out its children either horizontally
or vertically.
Applies to: box elements
Valuebox-orient : horizontalbox-orient : verticalbox-orient : inline-axis (Initial)box-orient : block-axis
box-direction The ‘box-direction’ property specifies the
direction in which children of a box are displayed.
Applies to: box elements
Valuebox-direction : normal (Initial)box-direction : reverse
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
Exbox-ordinal-group: 1 (Initial)
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
Exbox-align : startbox-align : endbox-align : centerbox-align : baselinebox-align : stretch (Initial)
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
Exbox-pack : start (Initial)box-pack : endbox-pack : centerbox-pack : justify
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
Exbox-flex: 0.0 (Initial)
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