Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序，也可以反转之。要开启弹性盒模型，只需设置拥有子盒子的盒子的display的属性值为box（或inline-box）即可。
display: box;
水平或垂直分布
“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示，
body{
display: box;
box-orient: horizontal;
}
反向分布
“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。
body {
display: box;
box-orient: vertical;
box-direction: reverse;
}
具体分布
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。
body {
display: box;
box-orient: vertical;
box-direction : reverse;
}
#box1 {box-flex:1;box-ordinal-group: 2;}
#box2 {box-flex:2;box-ordinal-group: 2;}
#box3 {box-flex:2;box-ordinal-group: 1;}
盒子尺寸
默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。box-flex如何对父容器的宽度进行划分，三个子块分别设置了1、2、2,也就是把这个父容器分成5份，分别占据了父结构宽度的1/5(100px)、2/5(200px)、2/5(200px)。如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。
html
display:-*-box; 是定义盒子模型的父容器。
-*-box-flex: 1; 是定义盒子模型的子容器在父容器中的比例。
如是1,2,1，意思就是section1、2、3分别占25%，50%，25%。
而-*-box有如下属性：
-*-box-orient: horizontal | vertical | inline-axis | block-axis | inherit
用来确定父容器中的子容器的布局是水平布局还是垂直布局。（默认水平）
-*-box-direction: normal | reverse | inherit
用来确定子容器的排列顺序，如是reverse，就是将123在页面中变成了321的排列
-*-box-align:start（顶对齐） | end（底对齐） | center（居中对齐） | baseline | stretch（拉伸，拉伸到和父容器等高）
用来确定子容器的垂直对齐方式。
-*-box-pack: start | end | center | justify
用来确定子容器的水平对齐方式。