网格行

希望您以前已经阅读过 Flexbox 介绍理论，让我们更深入地了解网络系统中的 Flex 行(Rows)。

为父容器添加 .row 类后开启一个 Flex 行，为每个子元素添加一个 .col-* 类来瓜分父容器的宽度，若每个子元素都使用不带数字的 .col 类则所有子元素都等宽，它们会平分父容器的宽度。（此段不属于官方文档，下面是英文原文）

Utilize breakpoint-specific column classes for equal-width columns. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.（翻译不通）

等宽

例如，以下是两个网格布局，它们适用于屏幕宽度在 xs 到 xl 之间的设备上。

.col

设置一列的宽度

Flexbox 网格列的自动布局还意味着您可以设置其中一列的宽度，其他列的宽度将自动调整。您可以使用预定义的网格类（如下所示）或内联宽度。请注意，无论中间列的宽度如何改变，其他列都会跟着调整大小。

.col

.col-6 (wider)

.col

.col-5 (wider)

.col

可变的宽度内容

使用 col-{breakpoint}-auto 类，列可以根据其内容的自然宽度调整自身大小。这对于单行内容（如输入、数字等）非常方便（请参阅此页面上的最后一个示例）。结合水平对齐类，这对于在视口宽度变化时列大小不均匀的居中布局非常有用。

.col-12 .col-md-2

.col-12 .col-md-auto (Variable width content)

.col-12 .col-md-2

.col

.col-12 .col-md-auto (Variable width content)

.col

响应式类

网格系统拥有五个预定义的断点类，用于构建复杂的响应式布局。它们分别对应超小型、小型、中型、大型和超大型屏幕设备。您可以使用它们在不同的设备上适配合适的列大小。

断点列表

对于从最小的设备到最大的设备都相同的网格，请使用 .col 和 .col-* 类。需要特别大的列时，请为 col 类指定数字；否则，请坚持使用 .col。

.col

.col-8

.col-4

堆叠到水平

将 .col-12 和 .col-md-* 搭配结合使用，可以创建一个基础的网格系统，该系统在小型设备上会垂直堆叠布局，在桌面（中型）设备上变为水平布局。

.col-12 .col-md-8

.col-12 .col-md-4

.col-12 .col-md

混合匹配

不想让您的列简单地堆叠在某些网格层中吗？根据需要为每个层使用不同类的组合。请参阅下面的示例，以更好地了解所有工作原理。

.col .col-md-8

.col-6 .col-md-4

.col-6

对齐

使用 flexbox 对齐工具可控制垂直和水平方向的对齐方式。

items-start

One of three cols

items-center

One of three cols

items-end

One of three cols

self-*

.self-start

.self-center

.self-end

justify-start

One of two cols

justify-center

One of two cols

justify-end

One of two cols

justify-around

One of two cols

justify-between

One of two cols

justify-evenly

One of two cols

提示

有一个更方便的 CSS 类： flex-center 。它等于items-center + justify-center。使用时需要搭配 flex， row 或者 column使用。

列换行

如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行到新行上。

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-5
Subsequent columns continue along the new line.

.col-6 .col-sm-3

排序

First, but last

Second, unchanged

Third, but first

First, but unordered
(.order-none)

Second, but last
(.order-last)

Third, but first
(.order-first)

列偏移

使用.offset-md-* 类将列向右移动。这些类通过 * 列增加一列的左边距。例如， .offset-md-4 将 .col-md-4 移到四列后。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

嵌套

要使用默认网格嵌套您的内容，请在现有的 .col-sm-* 列中添加一个新的 .row 和一组 .col-sm-* 列。嵌套行应包括一组总计不超过 12 个或更少的列（不需要全部使用 12 个可用列）。

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Flex 演示（Playground）

要查看 Flex 的实际效果，您可以使用 Flex 演示（Playground）进行交互学习。

Flex Playground

发现了一处错误？帮助改进提交问题

鄂ICP备2022014971号-1

免责声明本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。

网格行

等宽

设置一列的宽度

可变的宽度内容

响应式类

断点列表

堆叠到水平

混合匹配

对齐

列换行

排序

列偏移

嵌套

Flex 演示 （Playground）

Flex 演示（Playground）