相信很多人在進行頁面布局的時候，經常會使用到float,margin,padding等布局元素，並為了調整細節煩不勝煩，CSS3中新的盒子模型——彈性盒子模型(Flexible Box Model)為大家帶來了不一樣的新體驗。
一 基本介紹
下面我們先來個樣例，使用方式如下：
{
display:-webkit-box;
display:-moz-box;
display:box;
}
貌似inline-box也可以。另外我們要注意瀏覽器間的私有屬性兼容，這真是無奈的問題。為了簡單，下面我只寫webkit內和瀏覽器的寫法。
當你把一個有效地html框標簽設置該樣式后，其內部的元素就將遵循和布局模式。你就可以定制你的盒模型具體展現形式了，下面介紹幾個有用屬性：
- -webkit-box-orient
box-orient屬性用於設置盒模型內部元素的排列方式，詳細如下：
- inline-axis：從左向右排列（默認值）
- horizontal：水平排列
- vertical：垂直排列
- block-axis：從上向下排列
- -webkit-box-sizing
box-sizing屬性用於改變容器的盒模型組成方式
- content-box: 此值維持css2.1盒模型的組成模式，border|padding|content {element width=border+padding+content}
- border-box: 此值改變css2.1盒模型組成模式，content|border|padding {element width=content}
- -webkit-box-direction
box-direction 屬性用於改變容器的顯示順序,使之反向排列。默認的情況下，block 級元素是按照加載順序從上到下排列， inline 級元素是從左到右排列的。下面來看看box-direction：
- reverse：block 級元素顯示在最頂部，最后加載的 inline 級元素顯示在左邊
- -webkit-box-pack
box-pack 屬性可以用於設置子容器在水平框中的水平位置，以及垂直框中的垂直位置，它共有四種可能值：start，end，justify 和 center。這些值的含義如下：
- start ：所有子容器都分布在父容器的左側，右側留空
- end ：所有子容器都分布在父容器的右側，左側留空
- justify ：所有子容器平均分布（默認值）
- center ：平均分配父容器剩余的空間（能壓縮子容器的大小，並且有全局居中的效果）
- -webkit-box-align
box-align 屬性用於規定如何對齊框的子元素。，共有五個值：start，end，center，baseline 和 stretch。
- start ：子容器從父容器頂部開始排列
- end ：子容器從父容器底部開始排列
- center ：子容器橫向居中（有點奇怪）
- baseline ：所有子容器沿同一基線排列（很難理解）
- stretch ：所有子容器和父容器保持同一高度（默認值）
二 瀏覽器支持情況
這張圖可以清楚地看出來，ie和opera就別想了，chrome和firefox和safari很給力。更讓人驚喜的是目前的主流智能移動設備操作系統Android和ios的內嵌瀏覽器對其也有不錯的支持。對移動開發來說這真是太美好了，至少對於飽受float，padding折磨的我來說是這樣的。
三 對應的子元素樣式
-webkit-box-flex
當父元素設定成盒模型顯示后，其子類型就可以水平或者垂直彈性分布了。你可以設置成固定的 寬度（高度）來顯示子元素，css3還為我們提供了一個自動分配空間的屬性：-webkit-box-flex。他可以將父元素的可用空間平均分配空間：例：
<div style="display:-webkit-box;border:1px solid #ccc; width:500px;height:50px;"> <div style="-webkit-box-flex:1;background-color:#0f0"></div> <div style="-webkit-box-flex:2;background-color:#f00"></div> <div style="width:100px;background-color:#0f0"></div> </div>
