display:box;box-flex是css3新添加的盒子模型屬性，它的出現(xiàn)可以解決我們通過N多結(jié)構(gòu)、css實(shí)現(xiàn)的布局方式。經(jīng)典的一個(gè)布局應(yīng)用就是布局的垂直等高、水平均分、按比例劃分。

目前box-flex屬性還沒有得到firefox、Opera、chrome瀏覽器的完全支持，但可以使用它們的私有屬性定義firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。

一、box-flex屬性

box-flex主要讓子容器針對(duì)父容器的寬度按一定規(guī)則進(jìn)行劃分

test_box在這是是父元素 list_one..等等是其子元素;display:box;相當(dāng)于只是一種聲明而已;只有聲明了子元素才可以對(duì)父元素進(jìn)行劃分;

二、box屬性

1、box-orient(orient譯為排列更準(zhǔn)確)用來確定父容器里子容器的排列方式，是水平還是垂直。可選屬性如下所示：

horizontal | vertical | inline-axis | block-axis | inherit

2、box-direction

box-direction用來確定父容器里的子容器排列順序，具體屬性如下代碼所示：

normal | reverse | inherit

3、box-align

box-align表示父容器里面子容器的垂直對(duì)齊方式，可選參數(shù)如下所示：

start | end | center | baseline | stretch

4、box-pack

box-pack表示父容器里面子容器的水平對(duì)齊方式，可選參數(shù)如下所示：

start | end | center | justify