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

将特定于断点的列类用于等宽列。 为所需的每个断点添加任意数量的无单元类，每列的宽度将相同。

等宽(Equal-width)

例如，以下是两个网格布局，它们适用于从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演示（Playground）

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