弹性盒子

弹性盒模型，通常称为 flexbox 或 flex，提供了一种在容器内排列元素的方法。弹性盒允许在单一维度（垂直或水平）上进行高效的布局控制。它充当显示属性，使您可以将弹性盒应用于各种元素。

本教程将涵盖以下主题：

1. flex 中的父元素和子元素
2. 配置父级弹性属性
3. 配置子 flex 属性

Flex 中的父元素和子元素

在元素上使用 flexbox 时，通常会将其应用于总体容器以管理子元素的排列。使用 flexbox 的容器元素称为“flex 父元素”，而 flex 父元素的直接子元素称为“flex 子元素”。

您可以将任何包含其他元素的元素指定为弹性父元素。要创建弹性父元素，请执行以下操作：

1. 在画布上选择所需元素（例如，部分、div 块）
2. 导航至 样式面板 > 布局 > 展示
3. 点击 柔性

与其他显示设置不同，在父元素上激活 Flexbox 会影响其直接子元素的布局。默认情况下，当在父元素上激活 Flexbox 时，子元素会向左对齐，并且水平相邻。可以在 Flex 父级设置中对此行为进行进一步调整。

请注意： 设置为利用 flexbox 的元素不会改变其直接子元素内的子元素的布局。

自定义父级 Flex 属性

将 flexbox 应用于父元素后，flex 父元素及其子元素都会有一系列布局选项可用：

• 方向
• 包装
• 结盟
• 间距

设置或反转方向

默认情况下，弹性父元素按从左到右的水平方向排列其内容。要修改此方向，请选择弹性父元素并访问 样式面板 > 布局 > 方向，然后选择 水平的 或者 垂直的 （各代表为“箭”图标）。

您还可以灵活地反转 flex 父级中的 flex 子级的方向。选择 flex 父级，访问 样式面板 > 布局 > 方向，然后点击 落下箭 揭开 包装 选项。在这里，您可以选择 从右到左 > 单排 或者 从下到上 > 单列。此操作会改变 flex 子元素的排列，切换它们的位置，使原始的第一个元素变为最后一个，第二个元素移至倒数第二个位置，依此类推。反转父元素的方向对于从右到左的布局或针对较小的显示器进行设计非常有用。

附加信息： 反转 flex 父元素的方向时，document 结构内的 flex 子元素的顺序保持不变。视觉顺序和 DOM 顺序之间的这种差异可能会导致网站访问者感到困惑。

包裹或调整 Flex 子元素的包裹行为

在 包装 菜单，您将看到同时控制方向和换行设置的选项。默认情况下，弹性子元素会尝试放入一行，这可能会溢出父容器。为了解决这个问题，您可以为子元素启用换行。选择弹性父元素，访问 样式面板 > 布局 > 方向，然后点击 下拉箭头 访问 裹 落下。

在这里，您可以从各种 裹 根据您希望如何组织内容来选择替代方案：

• 从左到右
• 从右到左
• 从上到下
• 从下到上

从左到右

您可以使用以下选项从左到右水平排列内容：

• 总结 — 超出父级宽度的 flex 子元素将被引导至下面的新行
• 包起来 — 超出父级宽度的 flex 子元素将被发送到上面的新行

从右到左

您可以使用以下选项从右到左水平排列内容：

• 单排 （不换行）——反转 flex 子元素的顺序，而不将超出的元素换行
• 总结 — 反转 flex 子元素的顺序，并将溢出父元素的任何内容换行到下面的新行
• 包起来 — 反转 flex 子元素的顺序，并将超出父元素的任何内容换行到父元素上方的新行

从上到下

您可以使用以下选项从上到下垂直排列内容：

• 右换行 — 超出父级高度的内容将换到右侧的新列
• 向左换行 — 超出父级高度的内容将换到左侧的新列

从下到上

您可以使用以下选项从下到上垂直排列内容：

• 单列 （不换行）— 反转 flex 子元素的顺序，而不将它们换行到新列中
• 右换行 — 反转 flex 子元素的顺序，并将超出父元素高度的任何内容包装到右侧的新列中
• 向左换行 — 反转 flex 子元素的顺序，并将超出父元素高度的任何内容包装到左侧的新列中

对齐 Flex 子元素

您可以在 样式面板 > 布局 > 结盟.

这 定位框 （即 3 x 3 网格）可让您快速调整 flex 祖先内的 flex 后代。 X 和 是 轴下拉列表显示您在对齐框中指定的值。了解有关对齐框的更多信息。

请注意，有些替代方案不能仅通过 对齐框，但您可以使用 X 和 是 轴下拉菜单。每个下拉菜单中可用的对齐选项取决于 flex 方向是水平还是垂直（即，您是对齐 flex 子元素的行还是列）。

水平方向

当弯曲方向定义为水平时， X 轴下拉菜单提供了以下对齐选项：

• 左边 — flex 后代与 flex 祖先的左侧对齐
• 中心 — flex 后代位于 flex 祖先的内部中心
• 正确的 — flex 后代与 flex 祖先的右侧对齐
• 之间的空间 — flex 后代与左右边缘均匀分布
• 周围空间 — flex 后代均匀分布在其他行和边缘之间

这 是 轴下拉菜单提供了以下选项，用于对齐 flex 后代的水平行：

• 顶部 — flex 后代与 flex 祖先的顶部对齐
• 中心 — flex 后代位于 flex 祖先的内部中心
• 底部 — flex 后代与 flex 祖先的底部对齐
• 拉紧 — flex 子代拉伸以占据空白的垂直空间
• 基线 — flex 子元素与基线对齐，或者与文本所在的不可见线对齐

垂直方向

当弯曲路线设置为垂直时， X 轴下拉菜单提供了以下对齐选项：

• 左边 — flex 后代与 flex 祖先的左侧对齐
• 中心 — flex 后代位于 flex 祖先的内部中心
• 正确的 — flex 后代与 flex 祖先的右侧对齐
• 拉紧 — flex 子代拉伸以占据空白的水平空间
• 基线 — flex 子元素与基线对齐，或者与文本所在的不可见线对齐

专家提示： 垂直基线对齐可以增强垂直文本元素的可读性，特别是在常见或偏爱垂直文本方向的语言或布局中。

这 是 轴下拉菜单提供了以下选项，用于对齐 flex 后代的垂直列：

• 顶部 — flex 后代与 flex 祖先的顶部对齐
• 中心 — flex 后代位于 flex 祖先的内部中心
• 底部 — flex 后代与 flex 祖先的底部对齐
• 之间的空间 — flex 子元素与顶部和底部边缘的间距均匀
• 周围空间 — flex 后代均匀分布在其他行和边缘之间

在 flex 后代之间添加间隙

间隙可让您定义 flex 子元素之间的空间，而无需添加边距或填充。要修改列和行之间的间隙大小，请选择 flex 父元素并导航到 样式面板 > 布局 > 差距.

默认情况下，列和行之间的间隙是同步的。这表示如果您调整列的间隙大小，行的间隙大小将自动对齐到相同的值。您可以点击“锁”图标来自主调整列和行之间的间隙。

专家提示： 要快速增加或减少间隙大小，请拖动 差距 滑块或按住 选项 （在 Mac 上）或 Alt （在 Windows 上）并在列或行字段上向左或向右滑动鼠标。

Flex 后代调整

flex 子元素的默认排列基于 flex 父元素上指定的 flex 布局设置。不过，您可以为 flex 子元素替换这些设置：

• 尺寸
• 结盟
• 命令

修改 flex 后代的大小

您可以通过选择子代，然后导航到 样式面板 > Flex 后代 > 浆纱. 有 4 种尺寸选项：

• 如果必要的话，缩小 flex 后代（以避免溢出）
• 如果可行，扩大 flex 后代
• 不要收缩或扩大弯曲后代
• 自定义增长和收缩行为

如果所有 flex 后代都固定为 如果可行则进行扩展, 必要时收缩， 或者 不要收缩或扩张，调整大小后剩余的空间将公平地分配给设置为 如果可行则进行扩展.

必要时收缩

必要时收缩 使您能够根据其宽度和高度属性（如果未指定宽度和高度，则根据 flex 子元素内的内容）调整其大小。当有额外空间可用时，这会使 flex 子元素变得刚性，但当空间不足时，它能够收缩到最小尺寸。

如果可行则进行扩展

如果可行则进行扩展 如果有可用空间，则允许 flex 后代扩展。这允许 flex 后代吸收 flex 祖先内的任何多余空间。

不要收缩或扩张

不要收缩或扩张 让你根据其宽度/高度属性来调整 flex 子元素的大小，使其完全不灵活。即使在溢出情况下，flex 子元素也不能扩展或收缩。

自定义增长和收缩行为

您也可以选择完全 定制增长和收缩行为 子代元素的收缩或扩张程度。这决定了 flex 子代相对于 flex 祖先元素内其他子代的收缩或扩张程度。

这 生长 该值决定了当父元素中剩余空间被分配时，flex 子元素相对于其他子元素可以扩展的程度。如果该值定义为 0，则不会超出必要范围扩展。

这 收缩 值决定了当分配负空间时，flex 子代相对于其他子代可以收缩多少。如果值设置为 0，则即使在溢出情况下也不会收缩。

这根据 值确定元素在受到 flex-grow 或 flex-shrink 影响之前的初始大小。您可以选择将其指定为特定尺寸（例如 20%、250px 等）或设置为“自动”。设置为“自动”时，flex 子元素的初始大小将由其宽度或高度（如果指定）或其内容决定。如果 根据 值被分配一个特定的尺寸，元素的内容或宽度/高度将被忽略，并且弹性子元素将按比例与同一弹性容器中的其他弹性子元素共享大小。

修改 flex 子元素的对齐方式

你可以通过选择子元素，然后导航到 样式面板 > 弹性子项 > 对齐和顺序. 有 6 种对齐方式可供选择：

• 自动（默认设置）
• 顶部
• 中心
• 底部
• 拉紧
• 基线

提示： 您还可以利用自动边距来对齐弹性子元素。

重新排序弹性子项

默认情况下，flex 子元素按其在源代码中的出现顺序显示（可以在导航器中查看顺序）。在调整设计元素以适应各种屏幕分辨率时，重新排列 flex 子元素会很有用。

要修改 flex 子元素的默认顺序，请选择该子元素，然后继续 样式面板 > 弹性子项 > 命令. 有 6 种订购选项可供选择：

• 维持现有秩序 — 保持 flex 子元素在原来的位置
• 第一的 — 将 flex 子元素移至 flex 容器的前面
• 最后的 — 将 flex 子元素移至 flex 容器的后面
• 定制订单 — 通过指定特定的顺序值，可以自定义排列多个 flex 子元素

您可以为自定义排序指定一个唯一的数值，该数值决定了弹性子元素在弹性容器内的位置。具有相同自定义排序值的弹性子元素将根据其原始位置进行排列。

使用自定义排序时，避免使用 第一的 或者 最后的 指定第一个或最后一个子元素。 第一的 将为 flex 子元素分配 -1 的顺序，而 最后的 将指定顺序 1。如果使用自定义顺序，任何大于 1 的值都会将 flex 子元素定位在任何顺序为 最后的任何小于 -1 的值都会将 flex 子元素定位在任何设置为 第一的.

提示： 更改 flex 子元素的顺序时，请记住它们的 document 顺序保持不变。这意味着元素的视觉顺序和 DOM 结构可能不一致，从而可能给网站访问者造成困惑。