11.15 CSS 弹性布局概述

如同在CSS入门教程中所接触到的，CSS 2.1里面定义了4种布局模式（即根据层级关系来确定框（box）尺寸和位置的算法）：

• 块布局（block layout），用来展示文档

• 行内布局（inline layout），也叫内联布局，用来展示文本

• 表布局（table layout），用于以表格形式展现二维数据

• 定位布局，用于有非常明确位置的元素，无需考虑文档中的其他元素

本章节介绍一种新的布局方式，弹性布局（flex layout），用于展示更为复杂的应用程序和网页。

弹性布局概述

从表面上看，弹性布局和块布局类似。它缺少一些可用于块布局的更复杂的文本或文档为中心的属性，比如 浮动（floats） 和 多列（columns）。 作为回报，它获得了应用程序和复杂的Web页面经常需要的，用于分配空间和调整内容的简单而强大的工具。

弹性容器的内容具有如下特性：

• 可以被摆放在上下左右任何流方向（flow direction）

• 可以拥有显示序（display order），这样可以在样式层颠倒或重新安排位置。（也就是视觉顺序可以和文档顺序无关）

• 可以沿着一个单一的（主要的）轴摆放，或沿第2条正交轴线包装成多行。

• 可以弹性调整大小来适配可用空间。

• 可以与它们的容器或彼此对齐。

• 可以沿主轴线动态压缩或扩展，同时保持容器的截面尺寸（cross size）。

上面是一个商品类目的应用，每个类目都有标题，图片、描述以及和一个购买按钮的例子。设计师的意图是，每一个类目具有相同的整体大小，照片在文本上方，购买按钮和底部平齐，而不管项目描述的长度。 弹性布局使得这个设计的许多方面实现起来很容易：

• 该类目使用弹性布局来横向布局项目，并确保同一行内的项目都是等高的。然后每一个类目本身就是一个列弹性容器，垂直放置其内容。

• 在每一个条目中，源文件的内容是以逻辑顺序排列的，其次是描述和照片。这提供了一个明智的命令和语音呈现非CSS的浏览器。 然而，对于一个更具吸引力的视觉演示，顺序是用来把图像从后面的内容中拉出来，并将自己的水平居中对齐。 在每一个条目中，源文件的内容是以逻辑顺序排列的，首先是标题，其次是描述和照片。这为非CSS浏览器和语音解析提供了一个合理的顺序。 然而，对于一个更具吸引力的视觉演示，order属性可以把图像从内容的后面拉到前面来，并将自己水平居中对齐。

• 把购买按钮的上外边距（margin-top）设置为auto，则不论该类目描述的高度，按钮被强制推到每个条目的底部。

模块交互

该模块扩展了CSS2.1中display属性的定义，添加一个新的块级和新的行内显示类型，并定义一个新的格式化上下文类型（FFC）来控制其布局的渲染。在该模块中定义的属性不适用::first-line 或 ::first-letter伪元素。