CSS3弹性盒模型第三章

之前爱站技术频道小编给大家带去了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代码：

CSS3代码：

演示效果：

关于布局空间管理的进一步分析

分析布局空间管理的各种情况。

基本代码：

演示效果：

子元素全部水平和垂直居中显示显示

演示效果：

子元素全部位于盒子的左下角，富余空间位于右上角

演示效果：

- 子元素水平平均分布，垂直伸展展示

演示效果：

- 子元素水平平均分布，在垂直方向上按基线分布

演示效果：

- 子元素全部位于盒子的右侧并平均分布，并按垂直顺序进行分布

演示效果：

空间溢出管理

上述“子元素全部位于盒子的右侧并平均分布，并按垂直顺序进行分布”可以看出，弹性布局中盒子内的元素很容易“跑出”盒子的“包围圈”。这种现象被称为空间已出。与传统的盒模型一样，CSS允许使用overflow属性来处理溢出内容的显示方式。当然，我们还可以使用box-lines属性避免空间已出问题（目前各大浏览器支持不太好）。该属性语法如下：

box-lines：single | multiple

取值说明：

single：所有子元素都单行或者单行显示。

multiple：所有子元素可以多行或多列显示。

实战体验：让子元素分行显示

HTML代码：

CSS3代码：

演示效果：

有关CSS3弹性盒模型的内容，小编对大家毫无保留的分享出去了，想学习CSS3弹性盒模型的小伙伴们，希望这几篇文章能帮助到你哦，喜欢还可以分享出去。