Css3引进了新的盒实体模型——延展性盒实体模型，该实体模型决策1个盒子在别的盒子中的遍布方法和怎样解决能用的室内空间。这与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个从“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怎样对父器皿的宽度开展区划，3个子块各自设定了1、2、2,也便是把这个父器皿分为5份，各自占有了父构造宽度的1/5(100px)、2/5(200px)、2/5(200px)。假如盒子不具备延展性，它将尽量的宽使其內容可见，且沒有任何外溢，其尺寸由“width”和“height”来决策（或min-height、min-width、max-width、max-height）。
