11.23 CSS 弹性布局分页（Pagination）

对于一些纸面介质（被打印出来的文档），需要确定在页面交接处的内容如何处理，比如不能出现文字被中断的情况。这种处理机制在CSS3中被称之为“分页（Pagination）”，其工作方式和Word文档非常相似。

对于电脑屏幕页面制作而言，本章节内容可跳过。关于CSS3分页的完整描述可阅读[CSS3-BREAK]模块。

弹性容器可以在弹性项、弹性行（在多行模式中）以及在弹性项内部进行页面拆分。break-*属性对于弹性容器的作用和块级（block-level）或行内级（inline-level）框一样。本节描述它们如何应用于弹性项及其内容。

下面的拆分规则中将分段容器称为“页（page）”。为了可读性，在本节中，“行（row）”和“列（column）”指的是弹性容器相对于分段上下文block flow方向的相对定向，而不是弹性容器本身。

分段弹性容器的布局在CSS3中尚未被精确定义。但是，弹性容器内部的拆分（breaks）遵守以下规则：[CSS3-BREAK]

• 在一个行弹性容器中，弹性项目上的break-before和break-after属性被传播到弹性行上，第一行上的break-before属性和最后一行上的break-after属性被传播到弹性容器。
• 在一个列弹性容器中，第一行上的break-before属性和最后一行上的break-after属性被传播到弹性容器。其他项目的强制拆分（forced break）只作用于项目本身。
• 一个弹性项目内的强制拆分将增加其内容的大小。它不会触发同级项目的内部拆分。
• 在一个行弹性容器中，A类拆分出现在同级弹性项目之间，而C类拆分出现在第一个/最后一个弹性行和弹性容器内容边界之间。 在一个列弹性容器中，A类拆分出现在同级弹性项目之间，而C类拆分出现在第一个/最后一个弹性行中的弹性项目和弹性容器内容边界之间。
• 当一个弹性容器被拆分后，弹性项的可用空间（在分段上下文的block流方向上）需要减去前页中弹性容器片段已经消耗掉的空间。一个弹性容器片段所消耗的空间是该页上的内容框的大小。如果由于该调整导致可用空间为负，则设置为零。
• 如果弹性容器的第一个片段不在页面顶部，并且其中一些弹性项目不能适应页面上的剩余空间，整个片段将移动到下一页。
• 当一个多行弹性容器被拆分时，每个片段都有它自己的弹性行“堆栈”，就像每一个多列元素的片段有自己的列框行。
• 除了以上几点外，用户代理（如浏览器）的实现应尽量试图减少弹性容器的变形。

到本章节为止，我们基本上把CSS3引入的高级特性讲解完了。可以看到CSS3的布局和动画功能非常强大。接下来我们将进入HTML5进阶部分课程的学习。