Bulma 源码解析之 .columns 类

{说明} 这一部分的源码内容被我简化了，另外我还额外添加了一个辅助类 is-grow。

.columns
  // 修饰类
  &.is-centered
    justify-content: center
  &.is-multiline
    flex-wrap: wrap
  &.is-vcentered
    align-items: center
  // 在平板+设备上采用 Flex 布局
  +tablet
    display: flex
.column
  display: block
  &.is-grow
    flex-grow: 1
  @for $i from 1 through 12
    &.is-#{$i}
      width: ($i / 12) * 100%
    &.is-offset-#{$i}
      margin-left: ($i / 12) * 100%

Bulma 的网格系统一行默认分成 12 列。.columns 包围 .column 进行网格布局。.columns 被设定为，在平板+设备上采用 Flex 布局，在手机上的使用默认的布局。

.columns 提供了三个辅助类：

1. .is-centered：列居中显示。
2. .is-multiline：列可多行显示。
3. .is-vcentered：列垂直居中显示。

.column 类被设定为块状元素。提供的类有：

1. 从 .is-1 到 .is-12：列的宽度占一行宽度的比例。
2. 从 .is-offset-1 到 .is-offset-12：列的偏移量占一行宽度的比例。

另外，我额外添加了一个类 .is-grow，表示在一行上如果有剩余空间，则被标记为该类的 .column 就会适当扩充宽度。

（完）