研究起前端技术来发现无边无际，页面布局、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%;
}
