當(dāng)在父元素設(shè)置屬性為flex后，即使不設(shè)置父元素的屬性也會(huì)自帶align-content:stretch如筛、align-items:stretch哪亿、flex-wrap:nowrap欺缘。如果不做更改袜硫，默認(rèn)情況下子元素顯示單行效果且高度為父元素的高度备闲。
flex-grow
在每一行上根據(jù)設(shè)置的值來平均分配剩余的空間。
假設(shè)父元素寬度為300px崩溪，一個(gè)子元素為50px浅役，一個(gè)為100px，則當(dāng)我們分別給兩個(gè)元素設(shè)置flex-grow后伶唯，我們其實(shí)是對父元素減去兩個(gè)子元素的寬度后的長度進(jìn)行分配觉既。如果兩個(gè)子元素都設(shè)置了1的話，即50變?yōu)?0 + (300 - 50 - 100)/2乳幸，100變?yōu)?00 + (300 - 50 - 100)/2瞪讼。
flex-shrink
設(shè)置元素的縮放比例，當(dāng)子元素的寬度和大于父元素的寬度后粹断，按照設(shè)置的這個(gè)比列縮放每一個(gè)子元素符欠。根據(jù)設(shè)置的flex-shrink計(jì)算每一個(gè)子元素的縮放比列。如
.flex{display:flex;}
.flex div{height:100px;}
.w1{width:400px;}
.w2{width:100px;}
.w3{width:200px;}
.w4{width:300px;}
...
<div class="flex w1">
<div class="w2"></div>
<div class="w3"></div>
<div class="w4"></div>
</div>
由于flex-shrink的默認(rèn)值為1瓶埋。根據(jù)這個(gè)值計(jì)算每一個(gè)子元素的縮放比例希柿。
子元素的寬度比例為: 1 : 2 : 3
flex-shrink設(shè)置的比例：1 : 1 : 1
實(shí)際需要縮小的比重：1 * 1 : 2 * 1 : 3 * 1
按照比例計(jì)算每一個(gè)子元素需要減少的寬度為：200 * 1 / 6，200 * 2 / 6, 200 * 3 / 6
如果將w4的flex-shrink設(shè)置為2养筒。計(jì)算新的縮小比重為： 1 * 1 : 2 * 1 : 3 * 2
再按照新的比例計(jì)算每一個(gè)元素需要減少的寬度： 200 * 1 / 9, 200 * 2 / 9, 200 * 6 / 9
flex-basis
設(shè)置子元素的初始寬度或高度曾撤。優(yōu)先級高于寬度和高度，當(dāng)設(shè)置了flex-basis和width或height后晕粪，flex-shrink的計(jì)算會(huì)按照flex-basis進(jìn)行計(jì)算挤悉。
flex-direction
設(shè)置flex的伸縮方向，子元素的排列方向（向上巫湘，向下装悲，向左，向右）尚氛，可以結(jié)合flex-grow實(shí)現(xiàn)上下自適應(yīng)布局诀诊。
flex-wrap
設(shè)置子元素在寬度和大于父元素寬度后是否換行，以及換行后是否反向顯示怠褐。
align-content
設(shè)置多行子元素在縱向上的對齊方式畏梆，設(shè)置在父元素中，默認(rèn)值為stretch奈懒。
- flex-start：多行元素貼在一起顯示在父元素的頂部。
- flex-end: 多行元素貼在一起顯示在父元素的底部宪巨。
- center: 多行元素貼在一起顯示在父元素的中間磷杏。
- space-between：如果多行的高度和（一行的高度按照最高的計(jì)算）大于等于父元素的高度，則顯示flex-start的效果捏卓，如果小于的話极祸，首行上邊框線貼著父元素的上邊框線慈格，最后一行的下邊框線貼著父元素的下邊框線，然后將多出的高度平分到行間距中遥金。
- space-around：如果多行的高度和（一行的高度按照最高的計(jì)算）大于等于父元素的高度浴捆，則顯示flex-start的效果，如果小于的話稿械，將多出的高度平分到每行的兩側(cè)选泻。
- stretch: 如果多行的高度和（一行的高度按照最高的計(jì)算）大于等于父元素的高度，則顯示flex-start的效果美莫，如果小于的話页眯，根據(jù)行數(shù)進(jìn)行平均分配多出的高度。
當(dāng)設(shè)置space-between時(shí)
space-between.png
當(dāng)設(shè)置stretch時(shí)：
stretch.png
修改height為auto后的圖：
stretch1.png
align-content: space-around + align-items: center的效果等同于align-content: stretch + align-items: center
從上面案例可以知道厢呵，stretch會(huì)擴(kuò)大行的高度窝撵。但其他的屬性對行的高度沒有影響，以最高的元素為當(dāng)前行的高度襟铭。
align-items
設(shè)置每行中的所有子元素在縱向上的對齊方式碌奉，當(dāng)子元素為多行的時(shí)候，先按照多行的分配方式分配界面（高度和寬度）寒砖。當(dāng)多行分配好后赐劣，再進(jìn)行單行子元素的對齊坟奥。（不管是多行還是單行映穗，這個(gè)屬性都會(huì)生效，只是它的生效范圍發(fā)生了變化贼涩。）
- felx-start: 同行中的元素貼著前一個(gè)元素的后面緊靠父元素的左側(cè)邊框線
- flex-end: 同行中的元素貼著后一個(gè)元素的后面緊靠父元素的右側(cè)邊框線
- center：同行中的元素貼在一起居中在父元素的中間（在一行中水平居中）
- stretch：每行中的元素在縱向上鋪滿該行茅逮。
該屬性只對當(dāng)前行的子元素有影響璃赡，對其他行的子元素不會(huì)有任何影響。
align-self
設(shè)置元素自身在當(dāng)前行的縱向上的對齊方式（即父元素中的單個(gè)子元素）
- flex-start：自身元素與當(dāng)前行的頂部對齊献雅。
- flex-end：自身元素與當(dāng)前行的底部對齊碉考。
- center: 自身元素在當(dāng)前行顯示居中效果。
- stretch： 當(dāng)設(shè)置自身元素的高度為auto或不設(shè)置高度時(shí)挺身，元素會(huì)根據(jù)元素縱向上占用所剩余的空間侯谁。如果子元素為單行的話，該元素會(huì)占用整個(gè)父元素的高度章钾。如果子元素為多行的話墙贱，則每行子元素會(huì)先根據(jù)align-content中的stretch來分配高度，再根據(jù)元素自身的對齊方式來分配元素在該行上的占用位置或高度贱傀。
justify-content
設(shè)置單行子元素在橫向上的對齊方式惨撇，如果子元素被分為多行的話，該屬性用于設(shè)置在每行中的子元素的對齊方式府寒。
- flex-start：該行元素左對齊
- flex-end：該行元素右對齊
- center：該行元素居中對齊
- space-between：如果該行元素大于兩個(gè)的話魁衙，第一個(gè)元素的左側(cè)邊框線和父元素的左側(cè)邊框線重合报腔，最后一個(gè)元素的右側(cè)邊框和父元素的右邊框線重合，最后將剩余的空間平均分配到行間距中（行與行之間的距離）剖淀。
- space-around: 將剩余的空間平均分配到每一個(gè)行的兩邊纯蛾。
父元素的平均分配給兩個(gè)子元素
當(dāng)兩個(gè)子元素都有內(nèi)容的時(shí)候直接使用flex-grow: 1并不能實(shí)現(xiàn)兩個(gè)子元素等寬，需要設(shè)置兩個(gè)子元素寬度相等且寬度和不超過父元素才可以實(shí)現(xiàn)子元素的等寬纵隔。由于flex-grow是用來分配剩余空間的翻诉，所以只要設(shè)置width: 0;flex-grow: 1;就可以實(shí)現(xiàn)子元素的寬度相等。
<div style="display: flex;height:100px;">
<div style="width: 0;flex-grow: 1;background:#d8d8d8;"></div>
<div style="width: 0;flex-grow: 1;background:#333;"></div>
</div>
當(dāng)我們在子元素中設(shè)置不同長度的文本巨朦，在去掉
width: 0;后米丘，布局變得不再平分：
實(shí)現(xiàn)上下和左右的自適應(yīng)布局
在彈性布局出現(xiàn)之前，我們采用浮動(dòng)和定位的方式實(shí)現(xiàn)頁面的自適應(yīng)糊啡，從彈性布局出現(xiàn)后拄查，自適應(yīng)布局變得簡單。
左右布局(對于需要自適應(yīng)的模塊設(shè)置flex-grow)
.flex{display: flex;}
.bg1{background: #e8e8e8;}
.bg2{background: #bfb9bf;}
.w2{width: 100px;}
.flex-1{flex-grow: 1;}
...
<div class="flex w1">
<div class="w2 bg1"></div>
<div class="flex-1 bg2"></div>
</div>
上下布局
.flex-dir{flex-direction: column;}
.flex{display: flex;}
.bg1{background: #e8e8e8;}
.bg2{background: #bfb9bf;}
.w2{width: 100px;}
.flex-1{flex-grow: 1;}
...
<div class="flex w1 flex-dir">
<div class="w2 bg1"></div>
<div class="flex-1 bg2"></div>
</div>
