希望你之前已经阅读过 Flexbox 简介 理论，让我们更深入地了解一下列。

¥In the hope that you’ve previously read the Introduction to Flexbox theory, let’s get deeper into Columns.

对于等高行，使用断点特定的行类。为每个所需的断点添加任意数量的无单位类，这样每行的高度都会相同。

¥Utilize breakpoint-specific row classes for equal-height rows. Add any number of unit-less classes for each breakpoint you need and every row will be the same height.

等高(Equal-height)

¥Equal-height

例如，这里有两个适用于所有设备和视口（从 xs 到 xl）的网格布局。

¥For example, here are two grid layouts that apply to every device and viewport, from xs to xl.

设置一行高度(Setting one row height)

¥Setting one row height

弹性框网格行的自动布局还意味着你可以设置一行的高度，其他行将自动围绕该行调整大小。你可以使用预定义的网格类（如下所示）或内联高度。请注意，无论中心行的高度是多少，其他行的大小都会调整。

¥Auto-layout for flexbox grid rows also means you can set the height of one row and the others will automatically resize around it. You may use predefined grid classes (as shown below) or inline heights. Note that the other rows will resize no matter the height of the center row.

可变高度内容(Variable height content)

¥Variable height content

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

¥Using the col-{breakpoint}-auto classes, rows can size itself based on the natural height of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with horizontal alignment classes, is very useful for centering layouts with uneven row sizes as viewport height changes.

响应式类(Responsive classes)

¥Responsive classes

网格包含五层预定义类，用于构建复杂的响应式布局。根据你的需要，在超小型、小型、中型、大型或超大型设备上自定义行的大小。

¥The grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your rows on extra small, small, medium, large, or extra large devices however you see fit.

所有断点(All breakpoints)

¥All breakpoints

对于从最小设备到最大设备都相同的网格，请使用 .col 和 .col-* 类。当需要特定大小的行时，请指定一个带编号的类；否则，请继续使用 .col。

¥For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized row; otherwise, feel free to stick to .col.

混合搭配(Mix and match)

¥Mix and match

不想让你的行简单地堆叠在某些网格层中？根据需要为每个层级使用不同的类组合。有关其工作原理，请参阅下面的示例。

¥Don’t want your rows to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

对齐(Alignment)

¥Alignment

使用 Flexbox 对齐工具垂直和水平对齐列。

¥Use flexbox alignment utilities to vertically and horizontally align columns.

换行(Wrapping)

¥Wrapping

如果一行中有超过 12 列，则每组额外的列将作为一个单元换行。

¥If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

重新排序(Reordering)

¥Reordering

嵌套(Nesting)

¥Nesting

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

¥To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Flex 网格 Playground(Flex Grid Playground)

¥Flex Grid Playground

要查看 Flex 的实际运行情况，你可以使用 Flex Playground 以交互方式了解更多信息。

¥To see the Flex in action, you can use the Flex Playground to interactively learn more.