Css3 Flexible Box Layout

10
Jason

description

Css3 Flexible Box Layout

Transcript of Css3 Flexible Box Layout

Page 1: Css3 Flexible Box Layout

Jason

Page 2: Css3 Flexible Box Layout

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

Page 3: Css3 Flexible Box Layout

display:box

display:box; display:-moz-box; display:-webkit-box;

Page 4: Css3 Flexible Box Layout

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

Page 5: Css3 Flexible Box Layout

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

Page 6: Css3 Flexible Box Layout

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)

Page 7: Css3 Flexible Box Layout

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)

Page 8: Css3 Flexible Box Layout

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

Page 9: Css3 Flexible Box Layout

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)

Page 10: Css3 Flexible Box Layout

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