bootstrap4的栅格系统

[jiangshanmeta]

bootstap系列最出名的是栅格系统，之前我分析过bootstrap3的栅格系统，在本篇文章中我将分析bootstrap4的栅格系统。这里对应几个知识点：

• flex布局
• 相对定位
• 响应式布局

其中，相对定位和响应式布局的应用和bootstrap3是一致的，这里就不多说了。

flex实现栅格系统

在bootstrap3中，栅格系统是基于浮动布局实现的，在bootstrap4中采用了flex实现。

关于栅格系统的基本语法，可以查看经常躺枪阮一峰的文章。

首先是在声明row为flex盒子

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

这样每一个col元素就是flex元素了，并且会在需要换行的时候自动换行。

自动等分布局

在bootstrap3中，无法实现自动等分，必须手动指定每一列要占几个格子，在bootstrap4中可以实现这一需求

.col {
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  max-width: 100%;
}

通过设定flex-basis为0，flex元素基础宽度为0，通过设置flex-grow为1，flex元素会均分剩余空间，这样就实现了等分布局。在不用flex布局之前，实现自动等分布局并不容易，一个常用的方案是使用table布局。

设定列的宽度

在bootstrap3中设定列的宽度是使用width属性，在bootstrap4中是使用flex-basis属性

.col-1 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 8.333333%;
      -ms-flex: 0 0 8.333333%;
          flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

等高布局

bootstrap3有个很严重的问题，就是他的栅格不是自动等高，需要自行实现等高，但是等高布局并不好优雅实现。bootstrap4使用的flex天然支持等高布局，因为align-items默认值是stretch，默认就是等高。

bootstrap4也提供了一些工具类帮我们调整align-items属性：

.align-items-start {
  -webkit-box-align: start !important;
  -webkit-align-items: flex-start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
}

.align-items-end {
  -webkit-box-align: end !important;
  -webkit-align-items: flex-end !important;
      -ms-flex-align: end !important;
          align-items: flex-end !important;
}

.align-items-center {
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

.align-items-baseline {
  -webkit-box-align: baseline !important;
  -webkit-align-items: baseline !important;
      -ms-flex-align: baseline !important;
          align-items: baseline !important;
}

.align-items-stretch {
  -webkit-box-align: stretch !important;
  -webkit-align-items: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
}