在CSS3彈性盒子模型中，我們可以使用box-flex屬性來定義彈性盒子內部的子元素是否具有彈性空間。如果子元素具有彈性空間，當彈性盒子（父元素）的尺寸放大或縮小的時候，具有彈性空間的子元素的尺寸也會放大或縮小。每當彈性盒子有額外的空間時，具有彈性空間的子元素也會擴大自身大小來填補這一空間。
語法：
box-flex:取值;
說明：
box-flex屬性取值是一個整數或者小數，不可為負數，默認值為0。
當盒子中包含多個定義了box-flex屬性的子元素時，浏覽器將會把這些子元素的box-flex屬性值相加，然後根據它們各自的值占總值的比列來分配盒子剩余的空間。
注意，box-flex屬性只有在彈性盒子確定了寬度或高度才有效。也就是說必須要先為父元素定義width或者height屬性值。
使用彈性空間設置，使得彈性盒子內部元素的總寬度和總高度，始終等於彈性盒子的寬度與高度。不過只有當彈性盒子具有確定的寬度或高度時，子元素的彈性空間才生效。
好像有點看不懂？還是來個例子吧！看完例子再回過頭重新理解一遍。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-flex屬性</title>
<style type="text/css">
body
{
display:-webkit-box;
-webkit-box-orient:horizontal; /*定義盒子元素內的元素從左到右流動顯示*/
width:200px;
height:150px;
}
#box1
{
background:red;
-webkit-box-flex:1.0;
}
#box2
{
background:blue;
-webkit-box-flex:2.0;
}
#box3
{
background:orange;
-webkit-box-flex:1.0;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡使用“box-orient:horizontal;”定義彈性盒子內部子元素水平排列，並且給彈性盒子指定了寬度為200px。之後我們只需要使用box-flex屬性給每一個子元素指定一個值，浏覽器就會自動計算每個子元素所占的比例，自動劃分寬度。這麼點數學問題，就不在這裡探討了。
當我們指定彈性盒子寬度為320px時，在浏覽器預覽效果如下：
現在我們回過去看看開頭那幾段話，好好理解一下。