11.16 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伪元素。