Flexbox能干什么，Bootstrap的网格系统 Flexbox Bootstrap

研究起前端技术来发现无边无际，页面布局、css样式、动画，各式各样，浏览器兼容不统一，代码又需要统一考虑，简直费心又非脑。

作为从IE6/7/8过来的人，根本不知道Flexbox是个啥，那时候根本也不区分前端开发，后端开发，全部一个人来。使用jquery操作dom，也很开心。现在由于工作需要研究起了前端技术，发现和之前完全是两码事了，html5、css3、ES6等新标准，vue，react等新的js库，还有babel，js需要转译才能运行了，webpack还可以打包应用，我的天！这都是些啥？而且用jquery似乎还会被鄙视。

村里刚通网，见笑。经过研究发现，现在的前端使用新的标准，新的语言，新的架构，有一整套规范。并且有一个完整的生态圈，这使得当前开发更加的规范，简单，页面（或者说应用更加准确）更加健壮，完全不是之前的html画页面了。

Flexbox

对于我的理解来说，这就是一个布局神器，它可以灵活的分配页面空间。提供了行/列的概念。使我们的页面元素可以像填空一样填到指定的列里面就行了。
并且其还提供了丰富的对齐功能，尤其是垂直居中，这个我记得在之前是很难实现的，甚至还要辅助js来实现。

Bootstrap

Bootstrap的网格系统基于flex，使用.container、.row、.col基本就可满足大部分网页或系统的布局了，同时它还提供了移动端优先的响应式布局，使应用在不同屏幕大小的设备上面都有一个较好的体验。

查看bootstrap.css发现其代码并不复杂，使用display:flex实现flex布局，使用@media实现响应式。
.container

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;//右填充
  padding-left: 15px;//左填充
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

.row

.row {
  display: -ms-flexbox;//兼容IE
  display: flex;
  -ms-flex-wrap: wrap;//兼容IE
  flex-wrap: wrap;
  margin-right: -15px;//抵消container的填充
  margin-left: -15px;//
}

.row-cols-*指定每行列数

.row-cols-1 > * {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;//1列全部宽度
}

.row-cols-2 > * {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;//2列每项50%
}

.row-cols-3 > * {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;//3列每项33%
}

.row-cols-4 > * {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;//4列每项25%
}

.row-cols-5 > * {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6 > * {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

col-*由于bootstrap是一个12列的格栅系统，所以每一列的宽度是除12得来的

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

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}