基于 Flex 布局的栅格体系

可用的辅助类:

.row 提供自左向右的行布局容器
.column 提供自上向下的列布局容器
.row-reverse 提供自右向左的行布局容器,此时需配合 .row 一起使用
.column-reverse 提供自下向上的列布局容器,此时需配合 .column 一起使用
.cell 提供自适应大小的单元格,需要在行或列布局容器中使用
.cell-1 ~ .cell-12 提供宽度为 1/12 到 12/12 的大小的单元格
.tile 需要在单元格(.cell.cell-*)内使用,提供一个填充满单元格的容器
.gutterless 需要和 .row.column 一起使用,用来移除行或列中单元格的内边距
.gutter-lg 需要和 .row.column 一起使用,使得单元格的内边距更大
.gutter-sm 需要和 .row.column 一起使用,使得单元格间包含较小的边距。
.single .row.column 一起使用,禁用行或列自动换行。

.row.column 放置在 .container 内使用,可以使行或列重新获得内边距。

.row 中添加所需数目的 .cell 即可,所有单元格都会自动拥有合适的宽度。当一行没有足够的空间显示所有单元格时,多余的单元格会自动换行显示。以下相同颜色的单元格在同一行中。

.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell

使用 .cell-1 ~ .cell-12 来手动指定单元格显示的宽度。指定宽度的单元格同样可以和自动宽度的单元格一起使用。

.cell-6
.cell-4
.cell-8
-1
.cell-2
.cell-3
.cell-6
.cell-2
.cell-4
.cell (自动)
.cell (自动)

.column 中添加所需数目的 .cell 即可,所有单元格都会自动拥有合适的高度。应该手动为列添加一个指定的高度,否则列的高度为所有单元格的最小高度之和。以下例子中,所有列的高度指定为 8rem。当一列没有足够的高度显示所有单元格时会换行(类似多列)显示剩下的单元格。以下相同颜色的单元格在同一列中。

.cell
.cell
.cell
.cell
.cell
.cell
.cell
.cell

使用 .cell-1 ~ .cell-12 来手动指定单元格显示的高度。指定高度的单元格同样可以和自动高度的单元格一起使用。

.cell-6
.cell-4
.cell-8
.cell-3
.cell-4
.cell-5
.cell-2
.cell-4
.cell (自动)
.cell (自动)
同时使用行或列

行或列可以同时使用来创建复杂的布局。

.row > .cell (自动)
.column > .cell-4
.column > .cell
.column > .cell
.row > .cell-6
.row > .cell-3
.row > .cell-9
单元格内边距

.row.column 添加 .gutterless 来移除单元格内边距。

.row > .cell (自动)
.column > .cell-4
.column > .cell
.column > .cell
.row > .cell-6
.row > .cell-3
.row > .cell-9

.row.column 添加 .gutter-lg 来获得双倍的单元格内边距。

.row > .cell (自动)
.column > .cell-4
.column > .cell
.column > .cell
.row > .cell-6
.row > .cell-3
.row > .cell-9