Flex布局
-
display: flex; 將對象作為彈性伸縮盒展示烁峭，用于塊級元素 -
display: inline-flex; 將對象作為彈性伸縮盒展示键畴，用于行內(nèi)元素
注意兼容問題： - webkit內(nèi)核瀏覽器應(yīng)使用前綴-webkit
- IE瀏覽器矗愧，可以很好的兼容IE11+版本锤岸，對于IE10只有部分可以兼容端盆，且使用時需增加-ms，IE10瀏覽器中容器定義成彈性伸縮盒時啥辨，需使用
display: -ms-flexbox
示例的dom結(jié)構(gòu)：
<div class="box"> <!--容器-->
<div class="item">1</div> <!--子項-->
<div class="item">2</div>
<div class="item">3</div>
</div>
基礎(chǔ)樣式設(shè)計：
.box {
width: 200px;
height: 200px;
background-color: #58a;
}
.item {
width: 50px;
height: 50px;
margin: 2px;
background-color: #fb3;
}
Flex 作用于容器上的6個屬性介紹
1、flex-direction
用于指定Flex主軸的方向盯腌，繼而決定 Flex子項在Flex容器中的位置
取值：row | row-reverse | column | column-reverse
- row：默認(rèn)值溉知，表示水平方向從左到右排列，此時水平方向軸線為主軸
- row-reverse：與row相反
- column：表示垂直方向從上到下排列腕够，此時垂直方向軸線為主軸
- column-reverse：與column相反
flex-direction四種取值的效果圖如下：
2级乍、flex-wrap
用于指定Flex子項是否換行
取值：nowrap | wrap | wrap-reverse
- nowrap：默認(rèn)值，表示不換行帚湘，F(xiàn)lex子項可能會溢出
- wrap：表示換行玫荣，溢出的Flex子項會被放到下一行
- wrap-reverse：表示反方向換行
flex-wrap三種取值的效果圖如下：
從示例圖中不難發(fā)現(xiàn)，換行以后兩行之間產(chǎn)生了很大的間距大诸，這個問題捅厂，在后面介紹的
align-content 屬性中可以得到很好的解決。
3资柔、flex-flow
復(fù)合屬性焙贷，是flex-direction 和 flex-wrap 的簡寫屬性，是用于指定Flex子項的排列方式
4建邓、justify-content
用于指定主軸(水平方向)上Flex子項的對齊方式
取值：flex-start | flex-end | center | space-between | space-around
- flex-start：默認(rèn)值盈厘，表示與行的起始位置對齊
- flex-end：表示與行的結(jié)束位置對齊
- center：表示與行中間對其
- space-between：表示兩端對齊，中間間距相等官边。要注意特殊情況沸手，當(dāng)剩余空間為負(fù)數(shù)或者只有一個項時外遇，效果等同于flex-start
- space-around：表示間距相等，中間間距是兩端間距的2倍契吉。要注意特殊情況跳仿，當(dāng)剩余空間為負(fù)數(shù)或者只有一個項時，效果等同于center
justify-content 的前三種取值的效果圖如下：
justify-content 取值為 space-between 的效果圖如下(注意特殊情況下效果等同于flex-start)：
justify-content 取值為 space-around 的效果圖如下(注意特殊情況下效果等同于center)：
5捐晶、align-items
用于指定側(cè)軸(垂直方向)上Flex子項的對齊方式
取值：stretch | flex-start | flex-end | center | baseline
- stretch：默認(rèn)值菲语，當(dāng)Flex子項未設(shè)置高度或者高度值為auto時，stretch起作用惑灵，將Flex子項高度設(shè)置為行高度山上。這里需要注意，在只有一行的情況下英支，行的高度為容器的高度佩憾，即Flex子項高度為容器的高度
- flex-start：表示與側(cè)軸開始位置對齊
- flex-end：表示與側(cè)軸的結(jié)束位置對齊
- center：表示與側(cè)軸中間對其
- baseline：表示基線對齊，當(dāng)行內(nèi)軸與側(cè)軸在同一線上干花，即所有Flex子項的基線在同一線上時妄帘，效果等同于flex-start
align-items 取值為 stretch 的效果圖如下：
align-items 取值為 flex-start flex-end center的效果圖如下：
align-items 取值為 baseline 的效果圖如下：
6、align-content
該屬性只作用于多行的情況下池凄，用于多行的對齊方式
取值：stretch | flex-start | flex-end | center | space-between | space-around
- stretch：默認(rèn)值抡驼，當(dāng)Flex子項未設(shè)置高度或者高度值為auto時踏揣，stretch起作用却妨，將Flex子項高度設(shè)置為行高度鹏漆。
- flex-start：表示各行與側(cè)軸開始位置對齊胧沫，第一行緊靠側(cè)軸開始邊界任斋，之后的每一行都緊靠前面一行
- flex-end：表示各行與側(cè)軸的結(jié)束位置對齊图柏，最后一行緊靠側(cè)軸結(jié)束邊界刻蟹，之后的每一行都緊靠前面一行
- center：表示各行與側(cè)軸中間對其
- space-between：表示兩端對齊午衰，中間間距相等割择。要注意特殊情況眷篇，當(dāng)剩余空間為負(fù)數(shù)時，效果等同于flex-start
- space-around：表示各行之間間距相等荔泳，中間間距是兩端間距的2倍蕉饼。要注意特殊情況，當(dāng)剩余空間為負(fù)數(shù)時玛歌，效果等同于center
再次強(qiáng)調(diào)：該屬性只作用于多行的情況昧港，在只有一行的Flex容器上無效，另外該屬性可以很好的處理支子，換行以后相鄰行之間產(chǎn)生的間距创肥。
align-content 各個取值的效果圖如下：
Flex 作用于子項上的6個屬性介紹
1、order
該屬性用來指定Flex子項的排列順序，數(shù)值越小叹侄，越靠前巩搏，可以為負(fù)數(shù)
取值：數(shù)值，默認(rèn)值為0
2趾代、flex-grow
用來指定Flex子項的擴(kuò)展比例贯底，不可以為負(fù)數(shù)，F(xiàn)lex容器會根據(jù)Flex子項設(shè)置的擴(kuò)展比例作為比率來分配剩余空間
取值：數(shù)值撒强，默認(rèn)值為0禽捆，表示即使存在剩余空間，F(xiàn)lex子項也不會擴(kuò)展
如下圖中飘哨，按照1:3分配剩余空間
3胚想、flex-shrink
用來指定Flex子項的收縮比例，不可以為負(fù)數(shù)芽隆，F(xiàn)lex容器會根據(jù)Flex子項設(shè)置的收縮比例作為比率來收縮各個Flex子項
取值：數(shù)值顿仇，默認(rèn)值為1，表示所有子項在剩余空間為負(fù)數(shù)時摆马，等比例收縮
注意：flex-shrink只能在不換行的情況下使用
如下圖中，按照1:3收縮：
4鸿吆、flex-basis
用來指定Flex子項的占據(jù)的空間囤采，不可以為負(fù)數(shù)
取值：auto | length | percentage | content
- auto：默認(rèn)值，計算規(guī)則：檢索Flex子項是否設(shè)置了width值（或者h(yuǎn)eight值惩淳，取決于flex-direction）蕉毯，如果設(shè)置了非auto的值，則使用width值（或者h(yuǎn)eight值）思犁，若沒有則使用content
- length：用長度值定義寬度代虾，不可為負(fù)數(shù)
- percentage：使用百分比定義寬度，不可為負(fù)數(shù)
如下圖中激蹲，為Item設(shè)置 flex-basis: 50%; ,在按照1:3分配剩余空間：
容器寬度為200px棉磨，Item1原始寬度為50px，設(shè)置 flex-basis: 50%;后寬度變成100px学辱，擴(kuò)展后寬度為110.5px乘瓤；而Item2原始寬度為50px，擴(kuò)展后為81.5px策泣，比例正好是1:3
注意：
1.設(shè)置flex-grow進(jìn)行分配剩余空間衙傀，或者使用flex-shrink進(jìn)行收縮都是在flex-basis的基礎(chǔ)上進(jìn)行的；
2.當(dāng)flex-basis的值以及width（或者h(yuǎn)eight）的值均為非auto時萨咕，
- 1）若content長度同時大于flex-basis的值以及width（或者h(yuǎn)eight）的值统抬，此時以flex-basis與width（或者h(yuǎn)eight）中值大的為準(zhǔn) ，但是，如果子項設(shè)置了overflow: hidden;或者overflow: auto;聪建，此時以flex-basis值為準(zhǔn)钙畔；
- 2）若content長度同時小于flex-basis的值以及width（或者h(yuǎn)eight）的值，此時以flex-basis值為準(zhǔn)妆偏；
- 3）若content長度小于flex-basis的值刃鳄，大于width（或者h(yuǎn)eight）的值，此時以flex-basis值為準(zhǔn)钱骂；
- 4）若content長度大于flex-basis的值叔锐，小于width（或者h(yuǎn)eight）的值，此時以content自身長度值為準(zhǔn)见秽；
3.當(dāng)width（或者h(yuǎn)eight）的值為auto時愉烙，且內(nèi)容的長度大于flex-basis設(shè)置的值，此時以content自身長度值為準(zhǔn)解取，且不能進(jìn)行flex-shrink收縮步责。相反如果內(nèi)容的長度小于flex-basis設(shè)置的值，則會使用flex-basis設(shè)置的值禀苦；
4.當(dāng)存在最小值 min-width（min-height）時蔓肯，且 flex-basis的值小于最小值時，寬度以最小值為準(zhǔn)振乏，當(dāng) flex-basis的值大于最小值時蔗包，以 flex-basis的值為準(zhǔn)
5、flex
復(fù)合屬性慧邮，是flex-grow 调限、 flex-shrink 和 flex-basis 的簡寫屬性，用來指定Flex子項如何分配空間
取值：none | 各拆分項屬性
- none：0 0 auto
- auto：1 1 auto
- 1：1 1 0%
- 0 auto 或 initial：0 1 auto 即初始值
注意：
- flex-grow：默認(rèn)值為0误澳，若省略則被默認(rèn)為1
- flex-shrink：默認(rèn)值為1耻矮，省略時默認(rèn)為1
- flex-basis：默認(rèn)值為auto，省略時默認(rèn)為0%
6忆谓、align-self
用來單獨指定某Flex子項的對齊方式
取值：auto | flex-start | flex-end | center | baseline | stretch
- auto：默認(rèn)值裆装，查找父元素的align-items值，如果沒有則取值為stretch
其他值同align-items
