Bootstrap 5 Flex

使用弹性盒子布局模块可以更轻松地设计灵活、响应式的布局结构，而无需使用浮动或定位。

使用一套全面的响应式 flexbox 实用程序，可以快速控制组件、网格列、导航等元素的布局、对齐和缩放。更复杂的应用可能需要自定义 CSS。

基本 Flex 功能

“d-flex”类创建了一个用于处理布局的基本 flex 盒子。我们可以包含信息、函数和其他应用程序数据。

语法

以下语法使用 flex 函数及其值。

示例

以下示例显示了 flex 函数及其值。

输出

以下输出显示了 flex 函数及其值。

内联 Flex 功能

“d-inline-flex”类创建一个 flex 函数以处理函数布局。信息和函数根据格式适应 flex。我们可以自动删除多余的空格和填充。

语法

以下语法使用 flex 函数及其值。

示例

以下示例显示了内联 flex 函数及其值。

输出

以下输出显示了内联 flex 函数及其值。

水平方向 Flex 功能

“d-flex”类使用数据的水平方向创建 flex。 "flex-row" 类以水平格式创建带有其值的 flex。如果我们要以水平反向格式显示值，则使用“flex-row-reverse”类。

语法

以下语法使用水平 flex 函数进行起始位置。

以下语法使用水平 flex 函数进行结束位置。

示例

第一个 flex 函数使用简单的水平方向内容。我们使用第二个具有反向水平方向内容的 flex 函数。以下示例显示了一个带有起始和结束位置的水平 flex 函数。

输出

以下输出显示了带有起始和结束位置的水平 flex 函数。

垂直方向 Flex 功能

“d-flex”类使用项目的垂直方向创建 flex。 “flex-column”类使用值以垂直格式创建 flex 盒子。如果我们要以垂直反向格式显示值，则使用“flex-column-reverse”类。

语法

以下语法使用垂直 flex 函数进行起始位置。

以下语法使用反向垂直 flex 函数进行结束位置。

示例

以下示例显示了带有起始和结束位置的垂直 flex 函数。我们可以将第一个 flex 函数用于简单的垂直方向内容。第二个 flex 函数处理反向垂直方向内容。

输出

以下输出显示了带有起始和结束位置的垂直 flex 函数。

Flex 函数的对齐内容

“d-flex”和“d-inline-flex”类创建具有所需位置的 flex。 “d-flex”使用“justify-content-*”类在 flex 盒子中获得所需的位置。在这里，我们可以将内容放置在 flex 函数的开始、结束、中心、周围和之间位置。

语法

以下语法使用具有 justify-content 的 flex 函数进行起始位置。

以下语法使用具有 justify-content 的 flex 函数进行结束位置。

以下语法使用具有 justify-content 的 flex 函数进行中心位置。

以下语法使用具有 justify-content 的 flex 函数进行之间位置。

以下语法使用具有 justify-content 的 flex 函数进行周围位置。

示例

以下示例显示了带有 justify-content 位置的 flex 函数。我们可以将第一个和第二个 flex 放在起始和结束位置。第三个 flex 函数内容放置中心位置，第四个 flex 位于内容之间。最后一个 flex 显示了 justify content 周围的位置。

输出

以下输出显示了带有 justify-content 位置的 flex 函数。

等宽 Flex 功能

“flex-fill”类创建 flex 项目的等宽。此类放置在“d-flex”类内。

语法

以下语法使用 flex 函数及其值。

示例

以下示例显示了 flex 函数及其值。第一个 flex 函数使用带有等宽内容的填充，第二个 flex 用于没有内容的填充。

输出

以下输出显示了带有或不带填充的等宽内容的 flex 函数。

Grow Flex 功能

“flex-grow-1”类使用“d-flex”类内的 flex 项目。 flex-grow 类获取 flex 盒子的剩余空间。它不适用于“d-inline-flex”类。

语法

以下语法使用 flex 函数及其值。

示例

以下示例显示了带有 grow 项目的 flex 函数。第一个 flex 容器显示 flex 函数中的 grow 项目。第二个 flex 函数显示没有 grow 项目。

输出

以下输出显示了带有或不带有 grow 类的 flex 函数。

自动边距 Flex 功能

“ms-auto”类用于将项目放置在 flex 函数的右侧。 “me-auto”类用于将项目放置在 flex 函数的左侧。

语法

以下语法使用 flex 函数的右侧。

以下语法使用 flex 函数的左侧。

示例

以下示例显示了一个带有左右边距的 flex 函数。 flex 项目会自动设置 flex 盒子中的边距。

输出

以下输出显示了自动边距 flex 函数。

Flex 函数的顺序

“order-*”类用于根据 flex 函数中的所需顺序放置项目。第一个顺序使用 flex 项目元素中的“order-1”类。

语法

以下语法使用 flex 项目的顺序。

示例

以下示例显示了 flex 函数中项目的顺序。我们可以在 flex 函数中放置 1 到 5 个顺序。

输出

以下输出显示了 flex 函数的顺序。

Flex 函数的换行

换行函数根据设备显示 flex 函数中的项目。项目根据屏幕宽度自动适应 flex 盒子。 flex 项目默认使用“flex-nowrap”类。

语法

以下语法使用具有 nowrap 函数的 flex 函数。

以下语法使用带有 wrap 函数的 flex 函数。

以下语法使用带有反向换行函数的 flex 函数。

示例

以下示例显示了带有 wrap 函数的 flex 函数。

输出

以下输出显示了带有 wrap 函数的 flex 函数。

Flex 函数的对齐方式

“align-item-*”类用于根据位置显示 flex 项目。我们可以使用开始、结束、位置、基线和拉伸类放置项目对齐方式。 “align-self-*”类

语法

以下语法使用具有 justify-content 的 flex 函数进行起始位置。

以下语法使用具有自对齐的 flex 函数。

以下语法使用具有内容对齐的 flex 函数。

示例

以下示例显示了具有 flex 函数对齐的 flex 函数。

输出

以下输出显示了带有内容、项目和自对齐的 flex 函数。

结论

flex 用于包含应用程序的信息、内容和项目。它将项目放入具有正确布局和边距的 flex 容器中，并自动完成。