希望您之前已经阅读了Flexbox 简介理论，让我们更深入地了解行。

利用特定断点的列类来创建等宽列。为每个所需的断点添加任意数量的无单位类，每个列都将具有相同的宽度。

等宽

例如，以下两个网格布局适用于所有设备和视口，从 xs 到 xl。

设置一个列宽

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

可变宽度内容

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

响应式类

网格包含五个级别的预定义类，用于构建复杂的响应式布局。您可以根据需要自定义超小、小、中、大或超大设备上的列大小。

所有断点

对于从最小设备到最大设备都相同的网格，请使用 .col 和 .col-* 类。当您需要特定大小的列时，请指定一个编号类；否则，可以随意坚持使用 .col。

堆叠到水平

使用 .col-12 和 .col-md-* 类的组合，您可以创建一个基本的网格系统，该系统最初在小型设备上堆叠，然后在桌面（中型）设备上变为水平。

混合搭配

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

对齐方式

使用 Flexbox 对齐实用程序垂直和水平对齐列。

列换行

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

重新排序

偏移列

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

嵌套

要使用默认网格嵌套内容，请在现有的 .col-sm-* 列中添加一个新的 .row 和一组 .col-sm-* 列。嵌套的行应包含一组加起来不超过 12 列的列（不需要使用所有 12 个可用列）。

Flex 游乐场

要查看 Flex 的实际效果，您可以使用 Flex 游乐场进行交互式学习。