工欲善其事必先利其器(多學(xué)一點(diǎn)知識(shí),少寫一行代碼:)
布局神器-彈性盒flex
（因?yàn)閷W(xué)了陶衅，于是寫了出來）
彈性盒是無需復(fù)雜計(jì)算的小規(guī)模的布局模塊久脯。既然是布局阅签，就會(huì)有外部容器(兵長)和內(nèi)部項(xiàng)目(小兵)∫遥現(xiàn)在這個(gè)隊(duì)伍已發(fā)展到第三代flex啦~
專業(yè)術(shù)語
首先要明確的一點(diǎn)，以下所說為無旋轉(zhuǎn)的正常視圖稻轨。
main:主軸（水平方向灵莲。可以理解為x軸）
cross:側(cè)軸（垂直方向殴俱≌常可以理解為y軸）
配個(gè)圖，理解下（其實(shí)不理解也沒事知道有這么個(gè)東西就ok~）
注意事項(xiàng)
- 多列模塊 中的column-*屬性對彈性子元素?zé)o效线欲。
- float 和 clear 對彈性子元素?zé)o效明场。使用 float 會(huì)導(dǎo)致 display 屬性計(jì)算為 block.
- vertical-align 對彈性子元素的對齊無效。
關(guān)于容器container（兵長）
需要配備 display:flex/inline-flex（塊/內(nèi)聯(lián)） 才會(huì)被瀏覽器認(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)目的本來大小）
- 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)置瀏覽器- -!）
由圖可知，父級容器最保險(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;
}