Flex 布局指北

Flex 轴

主轴（Main Axis）和交叉轴（Cross Axis）是 Flexbox 布局体系的概念。CSS 中除Flexbox 布局体系外，也有轴的概念：

• 行内轴（Inline Axis），对标 Flexbox中的主轴；
• 块轴（Block Axis），对标 Flexbox中的交叉轴。

这些一切的对齐方式轴，会受以下属性影响：

• flex-direction（Flexbox 特有）
• 书写模式 writing-mode
• direction
• HTML的 dir 属性

而且，CSS中存在以下轴相关的起点、终点的逻辑属性：

• 内联起点（Inline Start）等同于 Flexbox布局中的主轴起点（Main Start）
• 内联终点（Inline End）等同于 Flexbox布局中的主轴终点（Main End）
• 块起点（Block Start）等同于 Flexbox布局中的交叉轴起点（Cross Start）
• 块终点（Block End）等同于 Flexbox布局中的交叉轴终点（Cross End）

逻辑属性与物理属性又将 CSS盒模型分为 物理盒模型 和 逻辑盒模型，和轴相关的起点、终点的逻辑属性与物理属性的对应如下：

注：block-start 、 block-end 、 inline-start 和 inline-end 分别对应 top 、 right 、 bottom 和 left。

其余逻辑属性与物理属性的对应参考如下：

在 Flexbox 布局中，Flex 容器（display 设置值为 flex 或 inline-flex）中可能会包含一个或多个Flex 项目（Flex 容器中的 item），会有 Flex 项目尺寸大小之和大于或小于 Flex 容器的情景：

• 小于时，Flex容器的没有被填充的多余空间被称为 Flex容器的剩余空间（Positive Free Space）；
• 大于时，Flex 子项目会溢出Flex容器的多出来的空间就被称为不足空间（Negative Free Space），也被称为负空间。

Flex 容器和项目

Flex 容器下的Flex 项目也包括文本节点，伪元素。

Flex 容器在未显式设置与尺寸大小有关的属性时，会按其内容大小来计算自身大小。

• Flex 容器设置为 display: flex 且未显式设置与宽度相关的属性时，Flex 容器宽度与其父容器等同；
• Flex 容器 设置为 display: inline-flex 时且未显式设置与宽度相关的属性时，Flex 容器宽度宽度等同于所有Flex项目的宽度和。

 当 Flex 容器中所有 Flex 子项目的宽度和大于 Flex 容器时：

• 设置为 display: flex 时，Flex 项目会溢出 Flex 容器；
• 设置为 display: inline-flex 时，Flex 项目会撑大 Flex 容器，有可能造成 Flex 容器溢出其父元素（或祖先元素）。

使用 display: inline-flex 时最好结合 min-width 和 min-height 一起使用。不建议显式设置 width 和 height。

display 设置为 flex 时，Flex容器从表现形式上类似于块容器，事实它是一个Flex容器，上下文格式是FFC（Flexbox Formatting Content），因此运用于块容器（Block Formatting Content）上的一些布局属性就不再适用，比如：

• CSS的 column-*  属性在 Flex 容器上不起作用
• CSS的 float  和 clear 属性在 Flex 项目上不起作用，也不会让 Flex 项目脱离文档流
• CSS的 vertical-align 属性在 Flex 项目上不起作用
• CSS伪元素 ::first-line  和 ::first-letter 在 Flex 容器上不起作用，而且 Flex 容器不会为其祖先提供首行或首字母格式化

需要注意的是：如果元素的 display的值为 inline-flex ，并且该元素显式的设置了 float 或 position 的值为 relative、 absolute 或 fixed，那么 display 的计算值是 flex， 即 Flex容器表现行为和 display: flex 等同。

Flex 容器属性

• flex-direction 指定主轴方向，默认值 row。row-reverse 表现为主轴为从右到左
• flex-wrap 控制 Flex 项目在 Flex 容器换行的方式。默认值nowrap。wrap-reverse 换行方式表现为从主交叉轴从右到左，主轴从下到上。只有所有 Flex 项目宽度总和大于 Flex 容器主轴尺寸时，设置 flex-wrap 属性才能生效。

flex-direction 和 flex-wrap 可以简写成 flex-flow 。 flex-flow 使用时可以只显式设置一个值，也可以显式设置两个值：

• flex-flow 只显式设置一个值，并且该值和 <flex-direction> 相匹配时， flex-wrap 会取值 initial；
• flex-flow 只显式设置一个值，并且该值和 <flex-wrap> 相匹配时， flex-direction 会取值 initial；
• flex-flow 显式设置两个值时， flex-direction 和 flow-wrap 没有先后顺序之分，即可 flex-flow: column wrap 和 flex-flow: wrap column 等同。

• justify-content 控制 Flex 项目在 Flex 容器主轴方向的对齐方式。​​​​​​

  关键是space-between 、 space-around 和 space-evenly 三者的差异：

• space-between 会让第一个 Flex 项目的盒子起始边缘与 Flex 容器主 轴起点相稳合，最后一个 Flex 项目的盒子结束边缘与Flex容器主轴终点相稳合，其它相邻 Flex项 目之间间距相等。当Flex容器中只有一个 Flex 项目时，其表现行为和 flex-start 等同；
• space-around 会让第一个 Flex 项目的盒子起始边缘与 Flex 容器主轴起点间距和最后一个 Flex 项目的盒子结束边缘与 Flex 容器主轴终点间距相等，并且等于其他相邻两个Flex项目之间间距的一半。当Flex容器中只有一个Flex项目时，其表现行为和 center 等同；
• space-evenly 会让第一个 Flex 项目的盒子起始边缘与 Flex 容器主轴起点间距和最后一个 Flex 项目的盒子结束边缘与 Flex 容器主轴终点间距相等，并且等于其他每个 Flex 项目之间间距。当Flex容器中只有一个Flex项目时，其表现行为和 center 等同。

如果 Flex 容器没有剩余空间甚至存在负空间时， justify-content 的值表现形式为：

• flex-start 会让Flex项目在Flex容器主轴结束点处溢出
• flex-end 会让Flex项目在Flex容器主轴起点处溢出
• center 会让Flex项目在Flex容器两端溢出
• space-between 和 flex-start 相同
• space-around  和 center 相同
• space-evenly 和 center 相同

• align-items 控制 Flex 项目在交叉轴方向的对齐方式。默认值是 stretch。只有 Flex 项目示显式设置 height (或 width )值，Flex 项目才会在交叉轴上被拉伸填满整个 Flex 容器。

如果 Flex 容器没有剩余空间甚至存在负空间时：​​​​​​​

• ​​​​​​​​​​​​​​​​​​​​​​​​​​​​flex-start 会让Flex项目在Flex容器交叉轴终点处溢出；
• flex-end 会让Flex项目在Flex容器交叉轴起点处溢出；
• center 会让Flex项目在Flex容器交叉轴两侧溢出；
• baseline 会让Flex项目在Flex容器交叉轴终点溢出，有点类似于 flex-start。​​​​​​​

• align-content  只适用于 Flex 容器存在负空间并且显式设置 flex-wrap 的值为非 nowrap 时。表现行为有点类似于 justify-cotent 控制 Flex 项目在主轴方向的对齐方式（分配Flex 容器主轴剩余空间），而 align-content 可以用来控制多行状态下，行在 Flex 容器交叉轴的对齐方式（分配 Flex 容器交叉轴剩余空间）。可以把 align-content 状态下交叉轴中的整行当作是 justify-content 状态下单个 Flex 项目。

Flex 容器交叉轴没有剩余空间甚至存在负空间时，各值表现行为：

• flex-start 会让 Flex 容器的行在交叉轴结束点溢出
• flex-end 会让 Flex 容器的行在交叉轴起点溢出
• center 会让 Flex 容器行在交叉轴两端溢出
• stretch 表现行为类似于 flex-start
• space-around 表现行为类似于 center
• space-between 表现行为类似于 flex-start
• space-evenly 表现行为类似于 center

• gap 控制 Flex 项目之间的间距，但会忽略 Flex 项目与 Flex 容器边缘的间距： 

Flex 项目属性

• align-self 控制 Flex 项目个体按交叉轴方向的对齐方式。只有Flex 项目的 align-self 显式设置值为 auto 时不会覆盖 Flex 容器的 align-items；另外如果在 Flex 项目上显式设置 margin 的值为 auto 时，Flex 项目的 align-self 值将会失效。
• order 在不改变 DOM 结构之下指定具体的数值对 Flex 项目进行排序 ，数值越大越往后排。
• flex 属性根据 Flex 容器的可用空间对自身做伸缩计算， 。

其包含三个子属性： flex-basis 、 flex-shrink 和 flex-grow：

• flex-grow （扩展比率）的初始值为 0，类型是无单位数（ <number> ），用于设置Flex项目的扩展比率，让 Flex 项目得到（扩展）多少 Flex 容器剩余空间（Positive Free Space），即 Flex 项目可能会变大；

如果 Total flex-grow 小于 1：

• flex-shrink（收缩比率） 的初始值为 1，类型是无单位数（ <number> ），用于设置 Flex 项目收缩比率，让 Flex 项目减去 Flex 容器不足的空间（Negative Free Space），即 Flex 项目可能会变小；

或者

注意：当 Flex 项目显式设置了 max-width（min-width)的值时，当 Flex 项目根据 flex-grow(flex-shrink)计算出来的宽度大于  max-width（小于 min-width)时，Flex 项目会按  max-width(min-width)的值为准。如果 Flex 项目没有显式设置与宽度有关的属性（包括 flex-basis ），那么 flex-grow (flex-shrink)在计算时，Flex 项目的初始宽度会按其内容的宽度来计算，flex-shrink 和 flex-grow 不同之处在于，flex-shrink计算后的新宽度如果趋向0，则以内容最小宽度min-content 作为新宽度，而同时这个宽度将会转嫁使得其他 Flex 项目去按比例减少收缩。

• flex-basis （伸缩基准）的初始值为 auto，类型是有效的宽度（ width ）值，用于设置Flex 项目未扩展或收缩之前，它的大小，即指定了 Flex 项目在主轴方向的初始大小。若值为 0 ，则必须加上单位，以免被视作伸缩性。

  flex-basis 来初始化在任何Flex容器空间（剩余空间或不足空间）分配发生之前初始化Flex项目尺寸。在Flexbox布局模块中设置 Flex 项目的尺寸大小存在一个隐式的公式：content  ➜ width  ➜ flex-basis。如果 Flex 项目未显式指定 flex-basis 的值（即默认值 auto），那么 flex-basis 将回退到 width （或 inline-size ）属性；如果未显式指定 width （或 inline-size ）属性的值，那么 flex-basis 将回退到基于 Flex 项目内容计算宽度。还受 flex-grow 和 flex-shrink 以及 Flex 容器大小的影响。而且 Flex 项目 最终尺寸 会受 min-width、 max-width（或 min-inline-size 、 max-inline-size）属性限制。

flex 属性可以指定以下语法：​​​​​​​

• 单值语法：
  • 一个无单位的数（ <number> ），比如 flex: 1 ，作为 <flex-grow> 的值；
  • 一个有效的宽度（ width ）值，比如 flex: 30vw ，作为 <flex-basis> 的值；
  • 关键词 none 、 auto 或 initial （即初始值）。
• 双值语法 —— [ <flex-grow>，[ <flex-shrink> ​​​​​​​ | <flex-basis>]]；
• 三值语法—— [ <flex-grow>，<flex-shrink> ​​​​​​​ ，<flex-basis>]。

flex 属性若设置为关键词 none 、 auto 或 initial （即初始值）：

• auto ：Flex 项目会根据自身的 width 和 height 来确定尺寸，但 Flex 项目根据 Flex 容器剩余空间进行伸缩。其相当于 flex: 1 1 auto；
• initial ：Flex 项目会根据自身的 width 和 height 来设置尺寸。它会缩短自身以适应Flex容器，但不会伸长并吸收Flex容器中的额外剩余空间来适应 Flex 容器。其相当于 flex: 0 1 auto；
• none ：Flex 项目会根据自身的 width 和 height 来设置尺寸。它是完全非弹性的（既不会缩短，也不会伸长来适应 Flex 容器）。其相当于 flex: 0 0 auto。

如此，有助于处理 Flex 容器的剩余空间和负空间：

• 存在剩余空间，如果设置了 flex-grow，Flex项目会根据扩展因子分配Flex容器剩余空间；在未设置 flex-grow 时，在Flex容器中是否设置了对齐方式，如果是，那么会按对齐方式分配Flex容器剩余空间，如果不是，Flex容器剩余空间不变
• 存在不足空间，如果设置了 flex-shrink 值为 0 ，Flex 项目不会收缩，Flex 项目溢出 Flex 容器；如果未显式设置 flex-shrink 值，Flex 项目分平均分配 Flex 容器不足空间，Flex 项目会变窄（ Flex 项目的 flex-shrink 的默认值为 1 ），如果显式设置了 flex-shrink 的值为非 0 的不同值，那么 Flex 项目会按照不同的收缩因子分配Flex容器不足空间，Flex 项目同样会变窄。

• margin 的值为 auto 可以灵活的控制单个 Flex 项目在 Flex 容器中的位置。

​​​​​​​