Css3引入了新的盒模型——彈性盒模型，其實上一篇文章已經講到了一個box-flex，今天來講講另外的兩個彈性盒模型屬性box-orient 和 box-direction。
1、box-origent: 水平或垂直分布。
box-origent有兩個值：horizional（水平）和vertical（垂直），意思就是元素的排列方式！
css代碼如下：
body {
display: -webkit-box;
-webkit-box-orient: horizional;
}
水平排列方式如下：
body {
display: -webkit-box;
-webkit-box-orient: vertical;
}
垂直排列方式如下：
2、box-direction：反向分布
box-direction也有兩個值 normal(正常)和reverse（反向），當然如果使用的時候當然一般都是為了reverse的！該屬性的作用就是把本來 由1-2-3排列的元素倒過來變成：3-2-1
注意：無論是box-orient還是box-direction都需是在父元素中定義而決定子元素的排列的，而且他們起作用的前提是display:box 必須將display的值設置成box,否則是不會生效的，還有不同瀏覽器必須加上前綴（-webkit-、-moz-、-o-、-ms- 等等）。
3、除了box-direction能夠實現反向分布外，還有一個更具體的公布方法，是定義在每個子元素的屬性，它甚至可以決定任何的排列順序，1-3-2，3-1-2...都可以，那就是 box-ordinal-group ,
它的值是從1開始的正整數，值越小便排得超前面！
css代碼如下：
.box1{-webkit-box-ordinal-group:1}
.box2{-webkit-box-ordinal-group:3}
.box3{-webkit-box-ordinal-group:2}