CSS3 introduces a new box model - the flexible pouch model, which determines the distribution box in a manner other box and how to handle the available space. Using this model, you can easily create elastic layout fluid layout adaptive or adaptive font size of the browser window. Flexible pouch model looks good, Gecko and WebKit The model has some tentative test. Plus -moz and -webkit to use the property before these properties. That is, firefox, safari, chrome You can use these features. The model for us to solve some common problems web design is very convenient, such as: form layout, centered vertically, visually separate html stream, and so on. For convenience, I use here webkit prefix to explain examples of the flexible pouch model, the reader can chrome browser preview stories. Examples of the elastic box model using the following HTML code:
The traditional model based on HTML stream cassette boxes are arranged in the vertical direction. Elastic box model may specify a particular order, it may be reversed. To open the flexible pouch model, only the sub-box has a box set of display attribute value Box (or inline-box) can. Here is the box box, open box model for the box:
#box {display: box;} / * Open box box box model * /
Elastic base box CSS layout code is as follows:
Using the chrome browser directly open this file, you can see the results after the browser interprets the file on this page, shown in Figure 1.
FIG elastic box model
(1) the definition of the layout direction of the box-orient box model
box-orient parameters as described in Table 1.
Table 1 box-orient Parameter Description
Axis "box-orient" defined distribution: vertical and horizontal. The default level is horizontal, when the box is set in the attribute Vertical horizontal direction, vertical display box sub-box, is provided as part of the code CSS box is as follows:
Use chrome browser re-open the file, you can see the sub-vertical distribution box box model, as shown in FIG.
FIG elastic vertical distribution box model
（2）box-direction元素排列顺序
“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。box-direction的参数说明如表2所示。
表2 box-direction参数说明
定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。若不设置该属性值或为为该属性设值为“normal”，则盒子以正序排列。接下来，我们将盒子设为水平分布并将其出现的顺序反转，box的CSS代码如下：
将上例的box的CSS代码替换后，使用chrome浏览器重新打开这个文件，就可以看到这个盒模型的顺序反转了，如图3所示：
图3 弹性盒模型反转
（3）box-ordinal-group设置元素的具体位置
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。将盒子的分布顺序按照特定的顺序排列如“3-2-1-5-4”，CSS代码如下：
将上例的CSS代码替换，使用chrome浏览器重新打开这个文件，就可以看到这个盒模型的顺序按照“3-2-1-5-4”排列，如图4所示：
图4 弹性盒模型排序
（4）box-flex定义盒子的弹性空间
默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。如果盒子是弹性的，其大小将按下面的方式计算：
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
下面的例子中，为每个盒子设定弹性空间。看起来好像是用百分比定义盒子的大小，但是有一个区别：使用弹性盒模型，增加一个盒子，无须重新计算其大小，CSS代码如下：
将上例的CSS代码替换，使用chrome浏览器重新打开这个文件，就可以看到每个盒模子的弹性空间不同，如图5所示：
图5 盒模型弹性空间
除了为每个盒子设定弹性空间，我们还可以为部分盒子设定弹性空间，其它部分盒子有固定大小，例如我们将最中间的盒子也就是第三个盒子设定一个固定宽度为200px，其它盒子设定box-flex的属性值至少为1时，随着box盒子的宽度变化，除了第三个子盒子的宽度固定，其它盒子的宽度都会变化，CSS代码如下：
将上例的CSS代码替换，使用chrome浏览器重新打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，如图6所示：
图6 盒模型弹性空间
我们试图改变box的宽度来查看子盒子的大小，因为这里设定的box宽度为100%，所以我们可以通过改变浏览器的大小来控制box的宽度，当我们缩小浏览器时，可以观察到第三个盒子的宽度固定，其它盒子的宽度变小，如图7所示：
图7 盒模型弹性空间
同样地，我们也可以将两边的盒子固定，中间的盒子固定大小，这里就需要读者自己去实践练习。
（5）box-pack对盒模型富裕空间进行管理
box-pack属性规定当框大于子元素的尺寸，在何处放置子元素。该属性规定水平框中的水平位置，以及垂直框中的垂直位置。box-pack的参数说明如表3所示。
表3 box-pack参数说明
下面通过一个案例来对盒模型的富裕空间进行管理，通过一起使用box-align和box-pack属性，当有富裕空间时，让所有子元素居中，CSS代码如下：
将上例的CSS代码替换，使用chrome浏览器重新打开这个文件，就可以看到盒子的子元素居中，如图8所示：
图8 盒模型富裕空间管理
特别地，我们来对“box-align”属性的“baseline”属性值来进行说明，“baseline”表示设置伸缩盒对象的子元素基线对齐，可能大多数读者不理解什么叫做基线对齐，我们通过下面的案例来对这个属性值进行图形化的理解，代码如下：
Box model according to the present embodiment comprises a sub-element 5, and is aligned with the baseline "baseline" for the "box-align" property box. As a second line of sub-elements set high 200px, line 4 sub-element high set 100px, the rest of sub-elements for their own height 130px. Run the file, the results obtained shown in Figure 9:
FIG 9 box model baseline alignment subelements
By this example shows, it is not difficult to understand the significance of the baseline aligned, align it in accordance with the contents of the box body sub-element model.
(6) box-align to manage the position of the element in the vertical direction
box-align attribute specifies how to align the frame of the sub-elements, the box-align the parameters described in Table 4 below.
Table 4 box-align Parameter Description
Below to manage the FE model of the space in the vertical direction by a cartridge case. When the vertical direction rich space for all child elements centered, html code is as follows:
Use chrome browser re-open the file, you can see the box sub-element model centered, shown in Figure 10:
FIG box model 10 vertical space management affluent
As a front-end developers, the model for us to solve some common web design problems very easily, such as: form layout, centered vertically, visually separate html stream, and so on.