CSS Flex 布局规范

引子

最近接触 flex 布局的时候，碰到一些问题，于是借着这个机会，对 flex 相关的知识点进行整理。

• Origin
• My GitHub

简介

CSS 2.1 定义了 4 种布局模式，这些算法是根据盒子与它们的兄弟和祖先盒子的关系，来确定盒子自身大小和位置。分别有：

• block 布局，为文档布局设计
• inline 布局，为文本布局设计
• table 布局，为表格形式的 2D 数据布局设置
• positioned 布局，设计用于非常明确的定位，不用考虑文档中的其他元素

新引入的 flex 布局，跟 block 布局很类似，它缺少很多在 block 布局中，有关文本和文档相关的特性，例如浮动。相应的，它拥有了简单且强大的工具，用于来分配空间，并可以按照 web 应用程序和复杂网页经常需要的方式对齐内容。

目前处于候选推荐阶段，主流浏览器支持的情况很不错，详细见 Can I use flex。

相关概念和术语

一个元素设置 display 属性值为 flex 或 inline-flex，就会变成一个 flex 容器（flex container），其直接子元素被称为 flex 项（flex items），它们布局使用 flex 布局模式。

在 CSS 中定义了一些跟物理方向和空间相对应的一些概念，这些概念为未来定义新的布局提供理论支持，在 flex 布局模式中对应物理方向和空间的概念如下图。

• main axis：主轴，flex 项的排列是按照主轴进行排列，主轴的方向取决于 flex-direction 属性，不一定是水平方向。
• main-start/main-end：flex 容器主轴上的开始/结束位置，flex 项的排列是从 main-start 开始，到 main-end 结束。
• main-size：在主轴方向 flex 容器或者 flex 项的高度或宽度，它可能是元素的 width 或 height 属性。类似的，它的 min/max main size 属性取决于它的 min-width/max-width 或者 min-height/max-height 属性。
• cross axis：侧轴，跟主轴方向垂直的轴。
• cross-start/cross-end：flex 容器侧轴上的开始/结束位置，flex 项的排列是从 cross-start 开始，到 cross-end 结束。
• cross-size：在侧轴方向 flex 容器或者 flex 项的高度或宽度，它可能是元素的 width 或 height 属性。类似的，它的 min/max cross size 属性取决于它的 min-width/max-width 或者 min-height/max-height 属性。

flex container

成为 flex 容器的方式是，设置 display 属性值为 flex | inline-flex

• flex：当一个块级元素放在流布局中，这个值会让这个元素生成一个 flex 容器盒子。
• inline-flex：当一个内联元素放在流布局中，这个值会让这个元素生成一个 flex 容器盒子。

flex 容器会为它的内容建立一个 flex 格式化上下文，它形成的包含块就像块级容器做的那样。flex 容器的外边距（margin）不会跟它内容的边距重合。overflow 属性适用于 flex 容器。flex 容器不是块级容器，并且有些适用于 block 布局的属性在 flex 布局中并不适用，特别是：

• float 和 clear 不会产生浮动或者清空 flex 项，并且不会让元素脱离文档流。
• vertical-align 对 flex 项没有作用。
• ::first-line 和 first-letter 伪元素不适用于 flex 容器，flex 容器不会为它们的祖先提供第一行格式化或第一个字母。

这是测试示例，移动端查看如下。

如果一个元素的 display 属性设置为 inline-flex，在特定的环境下，它的的 display 属性会被计算为 flex。

用于 flex 容器的相关属性有：

• flex-direction
• flex-w