希望您已经阅读过 Flexbox 介绍 理论，让我们更深入地了解网格系统中的列（Columns）。

利用与断点相关的行类可以实现等高行。为每个需要的断点添加不带数字的类，所有行就会等高分配。

等高

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

设置某一行的高度

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

可变高度内容

使用 col-{breakpoint}-auto 类，行可以根据其内容的自然高度来调整自身大小。这对于单行内容（如输入框、数字等）非常方便。结合水平对齐类，在视口高度变化时实现不等高行的居中布局非常实用。

响应式类

网格系统提供了五个层级的预定义类，用于构建复杂的响应式布局，分别对应超小、小、中、大、超大屏幕设备，您可以根据需要自由定制各个设备上的行高。

所有断点

对于在所有设备上保持一致的网格，使用 .col 和 .col-* 类。需要指定特定大小时，为类加上数字后缀；否则，直接使用 .col 即可。

混合搭配

不想让行在某些网格层级上简单堆叠？根据需要为每个层级混合使用不同的类。看看下面的示例，更好地理解它是如何工作的。

对齐

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

换行

如果在一行中放置超过 12 列，多出的列会作为一组整体换行到新的一行。

重排序

嵌套

要在默认网格中嵌套内容，在现有的 .col-sm-* 列中添加一个新的 .row 和一组 .col-sm-* 列。嵌套行中的列总数应不超过 12（不要求用满全部 12 列）。

Flex 演示

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