Css3 Flexible Box Layout

652 views

Published on

Css3 Flexible Box Layout

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
652
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css3 Flexible Box Layout

  1. 1. Jason
  2. 2. Flexible Box Layout Module Orientation Display order Alignment Flexibility Packing along the box axis
  3. 3. display:box display:box; display:-moz-box; display:-webkit-box;
  4. 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. 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. 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. 7. box-align The box-align property specifies how a boxs 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. 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. 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. 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

×