box-flex是css3新添加的盒子模型屬性萤厅，它的出現(xiàn)可以解決我們通過N多結(jié)構、css實現(xiàn)的布局方式焚刚。經(jīng)典的一個布局應用就是布局的垂直等高、水平均分扇调、按比例劃分矿咕。
目前box-flex屬性還沒有得到firefox、Opera狼钮、chrome瀏覽器的完全支持碳柱，但可以使用它們的私有屬性定義firefox(-
moz)、opera(-0)熬芜、chrome/safari（-webkit)莲镣。
一、box-flex屬性
box-flex主要讓子容器針對父容器的寬度按一定規(guī)則進行劃分
HTML代碼：
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">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則該容器則定義為了內(nèi)聯(lián)元素涎拉，使用margin:0px auto讓其居中是無效的瑞侮，要想使其居中只能通過它的父容器的text-align:center);
分別給sectionOne、sectionTwo鼓拧、sectionThree的box-flex設置了3半火、2、1季俩，也就是說這三個子容器將父容器wrap的寬度
600px分為6份钮糖，sectionOne占居父結(jié)構寬度的3/6即300px，sectionOne占居父結(jié)構寬度的2/6即200px酌住，sectionThree占居
父結(jié)構寬度的1/6即100px店归。
以上是按比例數(shù)進行劃分分配的，如果其中一個子容器或多個子容器設置了固定寬度又會怎樣劃分那酪我？
如果其中一個子容器或多個子容器設置了固定寬度消痛，其它子容器沒有設置，其計算方式是這樣的：子容器如果設置了固定
寬度值都哭，該子容器則直接應用設置的寬度值肄满，其它沒有設置的則再父容器的寬度基礎上減去子容器設置的固定寬度谴古，在剩
下的寬度基礎上按一定比例進行劃分分配。請看下面代碼
HTML代碼:
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">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使子容器之間產(chǎn)生一定的間隔其寬度又如何進行分配劃分的那？接著看
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。待續(xù)內(nèi)容
二教寂、box屬性
以上將box-flex如何對父容器的寬度進行劃分分配講解完畢捏鱼，下面在看一下父容器里面的box屬性包括哪些。box屬性如下
所示1 box-orient, box-direction, box-align, box-pack, box-lines
二酪耕、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屬性其效果似乎表現(xiàn)一致，都可將子容器水平排列却盘，具體兩者有什么實質(zhì)差別暫時還
沒有搞清楚狰域。
如果父容器選擇horizontal或inline-axis屬性對子容器進行水平排列，其是對父容器的寬度進行分配劃分黄橘。此時如果父
容器定義了高度值兆览，其子容器的高度值設置則無效狀態(tài)，所有子容器的高度等于父容器的高度值旬陡；如果父容器不設置高度
值拓颓，其子容器的高度值才有效并且取最大高度值的子容器的高度。
HTML代碼：
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">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屬性(此屬性是默認值)其效果似乎表現(xiàn)一致驶睦，都可將子容器垂直排列，具體兩者有什么
實質(zhì)差別暫時還沒有搞清楚匿醒。
如果父容器選擇vertical或block-axis屬性對子容器進行垂直排列场航，其是對父容器的高度進行分配劃分。此時如果父容器
定義了寬度值廉羔，其子容器的寬度值設置則無效狀態(tài)溉痢；如果父容器不設置寬度值，其子容器的寬度值才有效并且取最大寬度
值的子容器的寬度。
HTML代碼：
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">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屬性則是讓子容器繼承父容器的相關屬性孩饼。
2髓削、box-direction
box-direction用來確定父容器里的子容器排列順序，具體屬性如下代碼所示：
normal | reverse | inherit
normal是默認值
按照HTML文檔里結(jié)構的先后順序依次展示镀娶。如下代碼立膛，如果box-direction設置為normal，則結(jié)構依次展示sectionOne梯码、
sectionTwo宝泵、sectionThree
HTML代碼：
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">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表示反轉(zhuǎn)
如上面所示設置nomal其結(jié)構的排列順序為sectionOne、sectionTwo轩娶、sectionThree儿奶；如果設置reverse反轉(zhuǎn)，其結(jié)構的排
列順序為sectionThree鳄抒、sectionTwo闯捎、sectionOne
HTML代碼：
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">03</section>
</article>
CSS代碼：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-direction:reverse;//設置為反轉(zhuǎn)
-webkit-box-direction:reverse;//設置為反轉(zhuǎn)
box-direction:reverse;//設置為反轉(zhuǎn)
}
.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;
}
展示效果：
3、box-align
box-align表示父容器里面子容器的垂直對齊方式嘁酿，可選參數(shù)如下所示：
start | end | center | baseline | stretch
HTML代碼：
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">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表示拉伸娱仔，拉伸到與父容器等高
3、box-pack
box-pack表示父容器里面子容器的水平對齊方式游桩，可選參數(shù)如下所示：
start | end | center | justify
HTML代碼：
<article class="wrap">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">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支持）
