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%;
}