本文介绍了CSS3弹性盒模型，供大家参考，大家亦可以结合CSS3弹性盒模型开发笔记（一）、CSS3弹性盒模型开发笔记（二）进行学习，具体内容如下
box-pack和box-align属性
当弹性元素和非弹性元素混合排版时，有可能会出现所有子元素的尺寸大小或小于盒子的尺寸，从而出现盒子空间不足或者富余的情况，这时就需要一种方法来管理盒子的空间。如果子元素的总尺寸小于盒子的尺寸，则可以使用box-align和box-pack属性进行管理。
box-pack属性可以在水平方向上对盒子的富余空间进行管理，该属性的基本语法如下：
box-pack：start | end | center | justify
取值说明：
start：所有子元素都显示在盒子的左侧，富余的空间显示在盒子的右侧。
end：所有子元素都显示在盒子的右侧，富余的空间显示在盒子的左侧。
justify：富裕的空间在子元素之间平均分配。在第一个子元素之前和最后一个子元素之后不分配空间。
center：富余的空间在盒子的两侧平均分配。
box-align属性可以在垂直方向上对盒子的富余空间进行管理，该属性的基本语法如下：
box-align：start | end | center | baseline | stretch
取值说明：
start：所有子元素沿着盒子的上边缘排列，都显示在盒子的上部，富余的空间显示在盒子的底部。
end：所有子元素沿着盒子的下边缘排列，都显示在盒子的底部，富裕的空间显示在盒子的上部。
center：富余的空间在盒子的上下两侧平均分配，即上面一半，下面一半。
baseline：所有盒子沿着它们的基线排列，富余的空间可前可后显示。
stretch：每个子元素的高度被调整到适合盒子的高度显示。
实战体验：自适应布局居中设计
HTML代码：
</div>- <body>
- <div id="box"><img src="images/china.gif" /></div>
- </div>
- </body>
CSS3代码：
</div>- <style type="text/css">
- /*明确定义页面文档满窗口显示*/
- body,html{
- height:100%；
- width：100%；
- }
- body{/*清除页边距*/
- margin:0;
- padding:0;
- /*定义文档为弹性盒子显示*/
- display:box;
- display:-moz-box;
- display:-webkit-box;
- /*页面元素水平显示，针对本例可以省略*/
- box-orient:horizontal;
- -moz-box-orient:horizontal;
- -webkit-box-orient:horizontal;
- /*定义提示对话框页面水平居中显示*/
- box-pack:center;
- -moz-box-pack:center;
- -webkit-box-pack:center;
- box-align:center;
- /*定义提示对话框页面垂直居中显示*/
- -moz-box-align:center;
- -webkit-box-align:center;
- /*以背景方式模拟页面显示*/
- background:#04082b url(images/map1.jpg) no-repeat top center;
- }
- #box{
- border:1px solid red;
- padding:4px;
- }
- </style>
演示效果：
关于布局空间管理的进一步分析
分析布局空间管