全局概括
在
flex容器中默認(rèn)存在兩條軸换况，水平主軸main axis和垂直的交叉軸cross axis伤哺，這是默認(rèn)的設(shè)置腔召，可以通過(guò)修改使垂直方向變?yōu)橹鬏S浴捆，水平方向變?yōu)榻徊孑S
1、設(shè)置垂直居中
align-items：定義了項(xiàng)目在交叉軸上的對(duì)齊方式
justify-content：定義了項(xiàng)目在主軸的對(duì)齊方式
<style>
# 垂直居中培遵，設(shè)置父級(jí)為
.flex-vertical-center{
display: flex;
align-items: center;
justify-content: center;
}
</style>
...
<div class="flex-vertical-center">
<h2>這是一個(gè)垂直居中的布局</h2>
</div>
2较坛、按比例均分自適應(yīng)
flex-basis：定義了在分配多余空間之前菱肖，項(xiàng)目占據(jù)的主軸空間疚宇，瀏覽器根據(jù)這個(gè)屬性亡鼠，計(jì)算主軸是否有多余空間
flex-grow：定義項(xiàng)目的放大比例
<style>
.container{
display: flex;
}
h1{
flex-grow: 1;
}
h1:nth-child(1){
background: red;
flex-basis: 10%;
}
h1:nth-child(2){
background: palegoldenrod;
flex-basis: 20%;
}
h1:nth-child(3){
background: paleturquoise;
flex-basis: 30%;
}
</style>
...
<div class="container">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
</div>
三個(gè)子元素會(huì)按照
flex-basis設(shè)置的比例1：2：3來(lái)布局，但并不會(huì)占滿(mǎn)父級(jí)敷待，此時(shí)加上flex-grow: 1;他們會(huì)使用原來(lái)的比例占滿(mǎn)父級(jí)间涵，如果只使用flex-grow屬性達(dá)到比例分割的效果：
<style>
.container{
display: flex;
}
h1:nth-child(1){
background: red;
/* flex-basis: 10%; */
flex-grow: 1;
}
h1:nth-child(2){
background: palegoldenrod;
/* flex-basis: 20%; */
flex-grow: 2;
}
h1:nth-child(3){
background: paleturquoise;
/* flex-basis: 30%; */
flex-grow: 3;
}
</style>
...
<div class="container">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
</div>
如果混搭使用，已經(jīng)使用
flex-basis分好了比例1：2：3此時(shí)設(shè)置第一個(gè)h1為flex-grow: 2;也就是放大了2倍榜揖，那么最終顯示的比例就是2：2：3
其它相關(guān)屬性：
當(dāng)所有項(xiàng)目以
flex-basis的值排列完后發(fā)現(xiàn)空間不夠了勾哩，且flex-wrap：nowrap時(shí)，此時(shí)flex-grow則不起作用了举哟，這時(shí)候就需要接下來(lái)的這個(gè)屬性
flex-shrink：定義了項(xiàng)目的縮小比例
默認(rèn)值:1思劳，即如果空間不足，該項(xiàng)目將縮小妨猩，負(fù)值對(duì)該屬性無(wú)效
例如有6個(gè)div：每個(gè)項(xiàng)目都設(shè)置了寬度為50px潜叛，但是由于自身容器寬度只有200px，這時(shí)候每個(gè)項(xiàng)目會(huì)被同比例進(jìn)行縮小册赛，因?yàn)槟J(rèn)值為1
上邊提到的
flex-wrap決定容器內(nèi)項(xiàng)目是否可換行
默認(rèn)值nowrap不換行钠导，即當(dāng)主軸尺寸固定時(shí)震嫉，當(dāng)空間不足時(shí)森瘪，項(xiàng)目尺寸會(huì)隨之調(diào)整而并不會(huì)擠到下一行
縮寫(xiě)
看到這里，說(shuō)一下縮寫(xiě)格式
flex：flex-grow票堵、flex-shrink和flex-basis的簡(jiǎn)寫(xiě)
默認(rèn)值：0 1 auto扼睬， 即不放大，可縮小，大小與width窗宇、height
