CSS3盒模型display:box詳解

display:box;box-flex是css3新添加的盒子模型屬性，它的出現能夠解決我們經過N多結構、css實現的佈局方式。經典的一個佈局應用就是佈局的垂直等高、水平均分、按比例劃分。
目前box-flex屬性尚未獲得firefox、Opera、chrome瀏覽器的徹底支持，但能夠使用它們的私有屬性定義firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。
1、box-flex屬性
box-flex主要讓子容器針對父容器的寬度按必定規則進行劃分
html代碼：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代碼：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;
}
.sectionThree{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background:green;
}

展現效果：

說明：
必須給父容器wrap定義css屬性display:box其子容器才能夠進行劃分(若是定了display:box則該容器則定義爲了內聯元素， 使用margin:0px auto讓其居中是無效的，要想使其居中只能經過它的父容器的text-align:center);分別給sectionOne、 sectionTwo、sectionThree的box-flex設置了三、二、1，也就是說這三個子容器將父容器wrap的寬度600px分爲6 份，sectionOne佔居父結構寬度的3/6即300px，sectionOne佔居父結構寬度的2/6即200px，sectionThree佔居 父結構寬度的1/6即100px。
以上是按比例數進行劃分分配的，若是其中一個子容器或多個子容器設置了固定寬度又會怎樣劃分那？
若是其中一個子容器或多個子容器設置了固定寬度，其它子容器沒有設置，其計算方式是這樣的：子容器若是設置了固定寬度值，該子容器則直接應用設置的寬度 值，其它沒有設置的則再父容器的寬度基礎上減去子容器設置的固定寬度，在剩下的寬度基礎上按必定比例進行劃分分配。請看下面代碼:
HTML代碼：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代碼：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
}
.sectionThree{
    width:200px;//設置固定寬度
    background:green;
}

展現效果：

說明：
sectionThree設置了固定寬度爲200px，父容器的寬度600px減去改子容器的200px還剩下400px，這400px寬度值則按 box-flex設置的值進行劃分，sectionOne佔居3/4即300px,sectionTwo佔居1/4即100px。
在以上代碼的基礎上給sectionTwo子容器添加margin:0px 50px使子容器之間產生必定的間隔其寬度又如何進行分配劃分的那？接着看
CSS代碼：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
        margin:0px 50px;//添加margin屬性
}
.sectionThree{
    width:200px;
    background:green;
}

展現效果：

說明：
父容器的寬度600px減去設置了子容器的200px基礎上再減去100px(2×50)剩下300px，這300px寬度值則按box-flex設置的值進行劃分，sectionOne佔居3/4即225px,sectionTwo佔居1/4即75px。
2、box屬性
上面」css3彈性盒子模型之box-flex」將box-flex如何對父容器的寬度進行劃分分配講解完畢，下面在看一下父容器裏面的box屬性包括哪些box屬性，具體屬性以下代碼所示：

box-orient | box-direction | box-align | box-pack | box-lines

一、box-orient
box-orient(orient譯爲排列更準確)用來肯定父容器裏子容器的排列方式，是水平仍是垂直。可選屬性以下所示：

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

horizontal、inline-axis說明：
給box設置horizontal或inline-axis屬性其效果彷佛表現一致，均可將子容器水平排列，具體二者有什麼實質差異暫時尚未搞清楚。如 果父容器選擇horizontal或inline-axis屬性對子容器進行水平排列，其是對父容器的寬度進行分配劃分。此時若是父容器定義了高度值，其子容器的高度值設置則無效狀態，全部子容器的高度等於父容器的高度值；若是父容器不設置高度值，其子容器的高度值纔有效而且取最大高度值的子容器的高度。
HTML代碼：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代碼：

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-orient:horizontal;
	-webkit-box-orient:horizontal;
	box-orient:horizontal;//水平排列
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	width:100px;
	background:green;
}

展現效果：

vertical、block-axis說明：
給box設置vertical或block-axis屬性(此屬性是默認值)其效果彷佛表現一致，均可將子容器垂直排列，具體二者有什麼實質差異暫時還沒 有搞清楚。若是父容器選擇vertical或block-axis屬性對子容器進行垂直排列，其是對父容器的高度進行分配劃分。此時若是父容器定義了寬度值，其子容器的寬度值設置則無效狀態；若是父容器不設置寬度值，其子容器的寬度值纔有效而且取最大寬度值的子容器的寬度。
HTML代碼：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代碼：

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-orient:vertical;
	-webkit-box-orient:vertical;
	box-orient:vertical;//垂直排列
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	height:100px;
	background:green;
}

展現效果：

inherit說明：
inherit屬性則是讓子容器繼承父容器的相關屬性。
二、box-direction
box-direction用來肯定父容器裏的子容器排列順序，具體屬性以下代碼所示：

normal | reverse | inherit

normal是默認值
按照HTML文檔裏結構的前後順序依次展現。以下代碼，若是box-direction設置爲normal，則結構依次展現sectionOne、sectionTwo、sectionThree.
HTML代碼：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代碼：

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-direction:normal;//設置mormal默認值
	-webkit-box-direction:normal;//設置mormal默認值
	box-direction:normal;//設置mormal默認值
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	width:100px;
	background:green;
}

展現效果：

reverse表示反轉:
如上面所示設置nomal其結構的排列順序爲sectionOne、sectionTwo、sectionThree；若是設置reverse反轉，其結構的排列順序爲sectionThree、sectionTwo、sectionOne.
HTML代碼：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代碼：

.wrap{
	width:600px;
	height:200px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-direction:reverse;//設置爲反轉
	-webkit-box-direction:reverse;//設置爲反轉
	box-direction:reverse;//設置爲反轉
}
.sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
}
.sectionThree{
	width:100px;
	background:green;
}

展現效果：

三、box-align
box-align表示父容器裏面子容器的垂直對齊方式，可選參數以下所示：

start | end | center | baseline | stretch

HTML代碼：

<article>
<section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代碼：

.wrap{
	width:600px;
	height:108px;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-align:stretch;
	-webkit-box-align:stretch;
	-o-box-align:stretch;
	box-align:stretch;
}
.wrap section{
	height:80px;
}
.wrap .sectionOne{
	background:orange;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	box-flex:1;
}
.wrap .sectionTwo{
	background:purple;
	-moz-box-flex:2;
	-webkit-box-flex:2;
	box-flex:2;
	height:108px;
}
.wrap .sectionThree{
	width:100px;
	background:green;
}

start
在box-align表示居頂對齊，以下圖所示

end
在box-align表示居底對齊，以下圖所示

center
在box-align表示居中對齊，以下圖所示

stretch
在box-align表示拉伸，拉伸到與父容器等高

三、box-pack
box-pack表示父容器裏面子容器的水平對齊方式，可選參數以下所示：

start | end | center | justify

HTML代碼：

<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>

CSS代碼：

.wrap{
	width:600px;
	height:108px;
	border:1px solid red;
	display:-moz-box;
	display:-webkit-box;
	display:box;
	-moz-box-pack:end;
	-webkit-box-pack:end;
	-o-box-pack:end;
	box-pack:end;
}
.wrap section{
	width:100px;
}
.wrap .sectionOne{
	background:orange;
}
.wrap .sectionTwo{
	background:purple;
}
.wrap .sectionThree{
	background:green;
}

start
在box-pack表示水平居左對齊，以下圖所示

end
在box-pack表示水平居右對齊，以下圖所示

center
在box-pack表示水平居中對齊，以下圖所示

justify
在box-pack表示水平等分父容器寬度（惟一遺憾的是，firefox與opera暫時不支持，只有safari、chrome支持）

本文連接地址: WEB前端開發(www.css119.com)–CSS3盒模型display:box詳解