工欲善其事必先利其器(多學(xué)一點(diǎn)知識,少寫一行代碼:)

布局神器-彈性盒flex

（因?yàn)閷W(xué)了，于是寫了出來）
彈性盒是無需復(fù)雜計(jì)算的小規(guī)模的布局模塊。既然是布局，就會有外部容器(兵長)和內(nèi)部項(xiàng)目(小兵)?，F(xiàn)在這個(gè)隊(duì)伍已發(fā)展到第三代flex啦~

專業(yè)術(shù)語

首先要明確的一點(diǎn)，以下所說為無旋轉(zhuǎn)的正常視圖。
main:主軸（水平方向?？梢岳斫鉃閤軸）
cross:側(cè)軸（垂直方向?？梢岳斫鉃閥軸）
配個(gè)圖，理解下（其實(shí)不理解也沒事_{知道有這么個(gè)東西就ok}~）

flex_terms.png

注意事項(xiàng)

• 多列模塊 中的column-*屬性對彈性子元素?zé)o效。
• float 和 clear 對彈性子元素?zé)o效。使用 float 會導(dǎo)致 display 屬性計(jì)算為 block.
• vertical-align 對彈性子元素的對齊無效。

關(guān)于容器container（兵長）

需要配備 display:flex/inline-flex（塊/內(nèi)聯(lián)） 才會被瀏覽器認(rèn)可為是容器
（就像是沒看到自由之翼誰知你是調(diào)查團(tuán)的感覺~）

容器有6個(gè)屬性（兵長特技：不同的陣列有不同的威力~）

• flex-direction(排列方向，起點(diǎn)：上下左右)

• row

• row-reverse

• column

• column-reverse

• flex-wrap(換行方式)

• nowrap 一行

• wrap 正序

• wrap-reverse 倒序

• flex-flow(direction和wrap的簡寫，默認(rèn)row nowrap)

• justify-content(單行水平對齊方式)

• flex-start 左對齊

• flex-end 右對齊

• center 居中對齊

• space-between 分散對齊

• space-around 等距分散對齊

• align-items(單行垂直對齊方式)

• flex-start 頭部對齊

• flex-end 尾部對齊

• center 中間對齊

• baseline 基準(zhǔn)線對齊（第一行文字）

• stretch 頭尾對齊（如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度）

• align-content(多行垂直對齊方式)

• flex-start 頭部對齊

• flex-end 尾部對其

• center 中間對齊

• space-between 分散對齊

• space-around 等距分散對齊

• stretch 頭尾對齊

關(guān)于項(xiàng)目item（小兵）

容器內(nèi)部的子元素就是項(xiàng)目了

項(xiàng)目也有6個(gè)屬性（小兵的特技）

• order（排序值。數(shù)值越小，排列越靠前，默認(rèn)為0）
• flex-grow（放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大）
• flex-shrink（縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。值為0，不受影響）
• flex-basis（預(yù)設(shè)寬度，默認(rèn)值為auto，即項(xiàng)目的本來大?。?/li>
• flex (grow, shrink和basis的簡寫，默認(rèn)為0 1 auto。后兩個(gè)屬性可選|該屬性有兩個(gè)快捷值：[auto (1 1 auto) ]和 [none (0 0 auto)])
• align-self（自身對齊方式；默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。）

版本及兼容性(發(fā)展史)

第三代：flex(優(yōu)勢：各種新技術(shù))
第二代：flexbox（好像沒啥優(yōu)勢）
第一代：box（優(yōu)勢：支持老版本，包括微信內(nèi)置瀏覽器- -!）

彈性盒兼容性.jpg

由圖可知，父級容器最保險(xiǎn)的兼容性寫法，應(yīng)該是

.flex-container{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

利用sass的@mixin簡易化書寫

栗子1.父級容器

  @mixin flex-container() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  }

栗子2.子級項(xiàng)目排序

  @mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
  }

栗子3.子級項(xiàng)目縮放及預(yù)設(shè)寬度

  @mixin flex-item($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
  }