Flexbox (CSS Flexible Box Layout) 是一种灵活排列容器（称为“Flex 容器”）中的元素的方式。容器中的元素（称为“Flex 内容”）可以放大或缩小，以便在保持指定的排序和间距的同时优化容器空间。在以下情况下，您可能会发现 Flexbox 特别有用：您想将不同大小的内容排列成行或列，并让较大内容比较小内容占用更多空间。
Flexbox 设置
您可以在“自适应”面板的 Flexbox 标签页上找到 Flexbox 设置。
使用 Flexbox
若要使用 Flexbox，请选中使用 Flexbox 复选框。当前的父元素会成为 Flex 容器，而 Flexbox 属性将显示在“自适应”面板中。
在以下情况下，Flexbox 不可用：
- 当前父元素是文本元素，例如
<p>或<h1>。 - 当前父元素包含
<span>或<a>等内嵌元素。如果父元素是页面，则不适用。
Flex 容器的任何直接子元素都会成为 Flex 内容。（辅助线层除外。）Flex 内容会沿主轴排列，该轴可设为水平或垂直。此外，您还可以配置内容沿轴的流动方向。由于 Flexbox 的朝向和方向可以更改，因此属性设置为“flex-start”和“flex-end”等值，而不是顶部、底部、左侧或右侧。
方向
方向通过设置主轴和沿该轴的流动方向来确定 Flex 内容的排列方式。
| 方向 | 行为 | 主轴 |
|---|---|---|
| 行 | Flex 内容按文本流方向（对于从左到右书写的语言 [如英语]，从左开始）逐行排列。 |
横向 |
| 行反向 | Flex 内容按文本流的反方向（对于从左到右书写的语言 [如英语]，从右开始）排列成行。 |
横向 |
| 列 | Flex 内容按内容流方向（通常从顶部开始）排列成列。 |
纵向 |
| 列反向 | Flex 内容按内容流反方向（通常从底部开始）排列成列。 |
纵向 |
间距
间距用于设置 Flex 内容是自动设置间隔，还是使用固定距离。
| 间距 | 行为 |
|---|---|
| 标准 | Flex 内容会根据指定的两端对齐、换行和对齐设置，自动排列在 Flex 容器中。 |
| 固定 | Flex 内容会根据指定的子间距和边界间距进行排列。 |
两端对齐
两端对齐决定了 Flex 内容沿主轴的排列方式。使用标准间距时，此设置可用。
| 两端对齐 | 行为 |
|---|---|
| Flex 开始位置 | Flex 内容打包在行或列的起始边缘。 |
| Flex 结束位置 | Flex 内容打包在行或列的结束边缘。 |
| 居中 | Flex 内容沿主轴居中。 |
| 空间之间 | Flex 内容沿主轴均匀间隔，起始内容和结束内容位于容器边缘。 |
| 空间环绕 | Flex 内容沿主轴均匀间隔，且两端的间距均为一半。 |
| 空间均分 | Flex 内容沿主轴均匀间隔，起始内容和结束内容的两侧都有相同的间距。 |
交叉轴对齐
交叉轴对齐是指 Flex 内容沿当前行或列的交叉轴排列的方式。
| 交叉轴对齐 | 行为 |
|---|---|
| Flex 开始位置 | Flex 内容位于交叉轴的起始边缘。 |
| Flex 结束位置 | Flex 内容位于交叉轴的结束边缘。 |
| 居中 | Flex 内容沿交叉轴居中放置。 |
| 拉伸 | Flex 内容会沿交叉轴拉伸以填充可用空间。 |
| 基准 | Flex 内容沿交叉轴放置，以便对齐其基准。 |
换行
换行设置用于决定内容在容器中是否可换行。使用标准间距时，此设置可用。
| 换行 | 行为 |
|---|---|
| 不换行 | Flex 内容排列在一行或一列中。 |
| 换行 | 当 Flex 内容太大而无法放在一行中时，Flex 内容可以换行以形成多个行或列。 |
| 换行反向 | 当 Flex 内容太大而无法放在一行中时，Flex 内容可以换行以形成多个行或列。交叉轴方向是相反的。 |
换行对齐
换行对齐用于在 Flex 容器中有多个行或列时，设置行或列沿交叉轴（与主轴垂直）的排列方式。在使用标准间距并启用了换行时，此设置可用。
| 换行对齐 | 行为 |
|---|---|
| Flex 开始位置 | 行或列打包在容器的起始边缘。 |
| Flex 结束位置 | 行或列打包在容器的结束边缘。 |
| 居中 | 行或列沿交叉轴居中显示。 |
| 拉伸 | 行或列沿交叉轴拉伸以填充可用空间，除非它们具有指定的高度。 |
| 空间之间 | 行或列沿交叉轴均分，起始行和结束行或列位于容器边缘。 |
| 空间环绕 | 行或列沿交叉轴均分，且两端均有一半的空间。 |
子间距
Flex 容器中两项内容之间保持的距离（以像素为单位）。此设置适用于采用固定间距的情况。
边界间距
外部内容与 Flex 容器之间保持的距离（以像素为单位）。使用固定间距时，此设置可用。
子级顺序
此处列出了 Flexbox 中包含的元素。若要对这些元素重新排序，请将内容拖动到列表中的新位置。
您还可以在场景上移动 Flex 内容来重新排序。
Flexbox 子属性
Flex 内容有自己的属性。选择子属性可查看和修改其 Flexbox 设置。
虽然 Flex 内容的大小可能会增大或缩小，但它们遵循最小和最大宽度和高度。它们的“左侧”和“顶部”属性已被停用，因为 Flex 内容根据 Flexbox 设置排列，但“平移”属性可用于偏移位置。
交叉轴对齐
Flex 内容的交叉轴对齐会覆盖为容器设置的默认交叉轴对齐。
| 交叉轴对齐 | 行为 |
|---|---|
| 自动 | Flex 内容使用 Flex 容器的交叉轴对齐设置。 |
| 基准 | Flex 内容的基准与采用基准对齐的其他 Flex 内容的基准对齐。 |
| 居中 | Flex 内容位于交叉轴的中心。 |
| Flex 结束位置 | Flex 内容位于容器结束边缘的交叉轴上。 |
| Flex 开始位置 | Flex 内容位于容器起始边缘的交叉轴上。 |
| 拉伸 | Flex 内容沿交叉轴拉伸以填满容器，除非它具有指定的高度。 |
Flex 展开
Flex 展开系数用于决定 Flex 内容将沿主轴展开多少（与同一行或同一列中其他内容的 Flex 展开系数成一定比例），以填充 Flex 容器中的可用空间。使用标准间距时，此设置可用。
例如，如果某行包含三个 Flex 展开系数分别为 1、1 和 2 的 Flex 内容，那么最后一项 Flex 内容在该行中占用的可用空间是其他 Flex 内容的两倍。
如果某行或列中内容的所有 Flex 展开系数的总和小于 1，Flex 内容可能不会占用全部可用空间。
当 Flex 展开系数为 0 时，Flex 内容将不会增大。
Flex 收缩
Flex 收缩系数用于决定 Flex 内容将沿主轴收缩多少（与同一行或同一列中其他内容的 Flex 收缩系数成一定比例），以适合 Flex 容器中的空间。使用标准间距时，此设置可用。
例如，如果某行包含三项 Flex 收缩系数分别为 1、1 和 2 的 Flex 内容，那么最后一项 Flex 内容的收缩程度比其他 Flex 内容更大。Flex 收缩系数会考虑 Flex 内容的大小。
当 Flex 收缩系数为 0 时，Flex 内容不会收缩。