display:box;box-flex是css3新添加的盒子模型屬性,它的出現(xiàn)可以解決我們通過(guò)N多結(jié)構(gòu)、css實(shí)現(xiàn)的布局方式。經(jīng)典的一個(gè)布局應(yīng)用就是布局的垂直等高、水平均分、按比例劃分。
目前box-flex屬性還沒(méi)有得到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)確)用來(lái)確定父容器里子容器的排列方式,是水平還是垂直。可選屬性如下所示:
horizontal | vertical | inline-axis | block-axis | inherit
2、box-direction
box-direction用來(lái)確定父容器里的子容器排列順序,具體屬性如下代碼所示:
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