Flexbox

Flexbox 用于快速管理网格列、导航、组件等的布局、对齐和尺寸，并提供一套完整的响应式 Flexbox 工具。

您也可以通过自定义 CSS 来实现复杂的实现。

Flexbox 属性

• 启用 Flex 行为
• 方向
• 内容对齐
• 项目对齐
• 单个项目对齐
• 结合 justify-content 的自动外边距
• 结合 align-items 的自动外边距
• 换行
• 顺序
• 内容对齐 (多行)

启用 Flex 行为

“display” 工具用于创建弹性容器，并将直接子元素转换为弹性项目。

您可以通过其他 flex 属性进一步修改 flex 容器和项目。

默认的 Flexbox 容器

内联 Flexbox 容器

响应式 Flexbox 容器

.d-flex 和 .d-inline-flex 也存在响应式变体。

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Flexbox 方向

您可以使用方向工具设置 flex 容器中 flex 项目的方向。这里不需要添加水平类，因为默认是 row。如果您发现需要设置此值的情况，可以使用“.flex-row”设置水平方向（浏览器默认），或“.flex-row-reverse”从相反方向开始水平方向。

示例

水平方向（默认）

垂直方向

您可以使用“.flex-column”设置垂直方向，或“.flex-column-reverse”从相反方向开始垂直方向。

示例

Flex-direction 也可以使用响应式变体

行

.flex-row
.flex-row-reverse

列

.flex-column
.flex-column-reverse

小

.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse

中

.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse

大

.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column

.flex-lg-column-reverse

超大尺寸

.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse

内容对齐

justify-content 工具用于更改 flex 项目在主轴上的对齐方式。

示例

justify-content 的响应式变体

您也可以使用 justify-content 的响应式变体。

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

项目对齐

align-items 工具用于 flexbox 容器，以更改 flex 项目在交叉轴上的对齐方式。您可以选择 start、end、center、baseline 或 stretch（浏览器默认）。

示例

align-items 的响应式变体

您也可以使用 align-items 的响应式变体。

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch

单个项目对齐

align-self 工具用于 flexbox 项目，以单独更改它们在交叉轴上的对齐方式。您可以选择与 align-items 相同的选项：start、end、center、baseline 或 stretch（浏览器默认）。

示例

align-self 的响应式变体

您也可以使用 align-self 的响应式变体。

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch

自动外边距

在 flexbox 中，您可以将 flex 对齐与自动外边距结合使用，来实现一些非常棒的效果。

结合 justify-content

通过混合使用 justify-content 和 margin-right: auto 或 margin-left: auto，您可以轻松地将所有 flex 项目移到一侧，同时将另一侧保留在相反的末端。

示例

结合 align-items

通过混合使用 align-items、flex-direction: column 和 margin-top: auto 或 margin-bottom: auto，您可以类似地将一个 flex 项目移到容器的顶部或底部。

示例

换行

它用于更改 flex 项目在 flex 容器中的换行方式。您可以选择以下选项：

不换行： .flex-nowrap

换行： .flex-wrap

反向换行： .flex-wrap-reverse

flex-wrap 的响应式变体

您也可以使用 flex-wrap 的响应式变体。

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

顺序

它用于通过一些 order 工具更改特定 flex 项目的视觉顺序。

您可以使一个项目成为第一个或最后一个，以及重置以使用 DOM 顺序。由于 order 可以是任何整数值（例如，5），请添加自定义 CSS 以满足任何其他所需值。

示例

order 的响应式变体

您也可以使用 order 的响应式变体

• .order-first
• .order-last
• .order-unordered
• .order-sm-first
• .order-sm-last
• .order-sm-unordered
• .order-md-first
• .order-md-last
• .order-md-unordered
• .order-lg-first
• .order-lg-last
• .order-lg-unordered
• .order-xl-first
• .order-xl-last
• .order-xl-unordered

内容对齐 (多行)

align-content 工具用于 flexbox 容器，以在交叉轴上对齐 flex 项目。您可以选择 start（浏览器默认）、end、center、between、around 或 stretch。

为了演示这些工具，我们强制使用了 flex-wrap: wrap 并增加了 flex 项目的数量。

注意！此属性对单行 flex 项目没有影响。

开始 (start)

end

center

between

around (围绕)

stretch

align-content 的响应式变体

您也可以使用 align-content 的响应式变体

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch