display:box;box-flex是css3新添加的盒子模型屬性，它的出現可以解決我們通過N多結構、css實現的佈局方式。經典的一個佈局應用就是佈局的垂直等高、水平均分、按比例劃分。下面小編就來談談CSS3盒模型display:box。
一、box-flex屬性
box-flex主要讓子容器針對父容器的寬度按一定規則進行劃分
CSS代碼：
{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
ionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
ionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
ionThree{
-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設置了3、2、1，也就是說這三個子容器將父容器wrap的寬度600px分爲6份，sectionOne佔居父結構寬度的3/6即300px，sectionOne佔居父結構寬度的2/6即200px，sectionThree佔居父結構寬度的1/6即100px。
以上是按比例數進行劃分分配的，如果其中一個子容器或多個子容器設置了固定寬度又會怎樣劃分那?
如果其中一個子容器或多個子容器設置了固定寬度，其它子容器沒有設置，其計算方式是這樣的：子容器如果設置了固定寬度值，該子容器則直接應用設置的寬度值，其它沒有設置的則再父容器的寬度基礎上減去子容器設置的固定寬度，在剩下的'寬度基礎上按一定比例進行劃分分配。請看下面代碼:
CSS代碼：
{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
ionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
ionTwo{
background:purple;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
ionThree{
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代碼：
{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
ionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
ionTwo{
background:purple;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
margin:0px 50px;//添加margin屬性
}
ionThree{
width:200px;
background:green;
}
說明：
父容器的寬度600px減去設置了子容器的200px基礎上再減去100px(2×50)剩下300px，這300px寬度值則按box-flex設置的值進行劃分，sectionOne佔居3/4即225px,sectionTwo佔居1/4即75px。
二、box屬性
上面”css3彈性盒子模型之box-flex”將box-flex如何對父容器的寬度進行劃分分配講解完畢，下面在看一下父容器裏面的box屬性包括哪些box屬性，具體屬性如下代碼所示：
box-orient | box-direction | box-align | box-pack | box-lines
1、box-orient
box-orient(orient譯爲排列更準確)用來確定父容器裏子容器的排列方式，是水平還是垂直。可選屬性如下所示：
horizontal | vertical | inline-axis | block-axis | inherit
horizontal、inline-axis說明：
給box設置horizontal或inline-axis屬性其效果似乎表現一致，都可將子容器水平排列，具體兩者有什麼實質差別暫時還沒有搞清楚。如果父容器選擇horizontal或inline-axis屬性對子容器進行水平排列，其是對父容器的寬度進行分配劃分。此時如果父容器定義了高度值，其子容器的高度值設置則無效狀態，所有子容器的高度等於父容器的高度值;如果父容器不設置高度值，其子容器的高度值纔有效並且取最大高度值的子容器的高度。
CSS代碼：
{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;//水平排列
}
ionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
ionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
ionThree{
width:100px;
background:green;
}
vertical、block-axis說明：
給box設置vertical或block-axis屬性(此屬性是默認值)其效果似乎表現一致，都可將子容器垂直排列，具體兩者有什麼實質差別暫時還沒有搞清楚。如果父容器選擇vertical或block-axis屬性對子容器進行垂直排列，其是對父容器的高度進行分配劃分。此時如果父容器定義了寬度值，其子容器的寬度值設置則無效狀態;如果父容器不設置寬度值，其子容器的寬度值纔有效並且取最大寬度值的子容器的寬度。
CSS代碼：
{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;//垂直排列
}
ionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
ionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
ionThree{
height:100px;
background:green;
}
inherit說明：
inherit屬性則是讓子容器繼承父容器的相關屬性。
