一、兩個(gè)重要的概念：
1. flex container：開啟了flex布局的元素
2.?flex items：flex container里面的直接子元素
例如上圖，紅色框就是?flex container，?黑色框就是?flex items
二、display的 flex 屬性和 inline-flex 屬性
1. flex屬性指的是將元素設(shè)置成塊級元素，獨(dú)占一行
2. inline-flex屬性是元素設(shè)置成?行內(nèi)塊級元素? 不會(huì)獨(dú)占一行
三、flex模型常用的幾個(gè)名詞：
1. main axis:主軸? ? ?主軸的開始位置為main start? 結(jié)束位置為main end
2.cross axis:交叉軸? 交叉軸的開始位置為cross start? 結(jié)束位置cross end
（注意：主軸和交叉軸位置不是固定的，根據(jù)實(shí)際情況而來）
3.mian size:主軸的大小
4.cross size：交叉軸的大小
四、?flex布局的常用屬性：
1）在flex container上常用的CSS屬性：
flex-direction：決定主軸的方向，默認(rèn)值是row，從左到右排列；
? ? ? ? ? ? ? ? ? ? ? ? 如果值變?yōu)閞ow-reverse，則排列變成從右到左;
? ??????????????????????如果值變?yōu)閏olumn，則排列變成從上到下;
? ??????????????????????如果值變?yōu)閏olumn-reverse，則排列變成從下到上;
flex-wrap（包裹）：默認(rèn)值：nowrap（不換行）
換行顯示：wrap 換行之后會(huì)對換行的元素進(jìn)行上分平等占位
換行顯示并翻轉(zhuǎn)：?wrap-reverse很少用
justify-content：決定flex items在主軸上的對其方式，
? ? ? ? ? ? ? ? ? ? ? ? ? 默認(rèn)情況下是同主軸的開始位置對其，默認(rèn)值為flex-start
????????????????????????????同結(jié)束位置對其：
????????????????????????????居中對其：
????????????????????????????分散對其，flex items之間的距離相等：
????????????????????????????等分間距，flex items之間的距離相等，邊距也相等：
????????????????????????????元素到元素之間的距離是元素到邊框距離的2倍：
align-items：決定flex items在交叉軸上面的對齊方式
?normal:在彈性布局中，效果和stretch一樣
?stretch：當(dāng)flex items 在交叉軸方向的size為auto時(shí)，會(huì)自動(dòng) 拉伸至填充·flex container（前提是沒有給flex items設(shè)置高度）
·flex-start：與交叉軸的開始位置對齊
flex-end:與交叉軸的結(jié)束位置對齊
center:與交叉軸居中對齊
baseline：與基準(zhǔn)線對齊（如果是多行文本，則根據(jù)第一行文本的底部作為基線）
? ??????????????????????
align-content：決定多行的flex items在交叉軸上的對其方式
align-content:flex-start:以交叉軸開始對齊
align-content:flex-end:以交叉軸結(jié)束對齊
align-content:space-between:元素分開上下分部
align-content:space-around元素與元素之間空隙是元素到邊距的2倍
align-content:space-evenly元素到元素到邊距的距離相等
2）在?flex items上常用的CSS屬性：
flex：一般不容易記住，建議看文檔
當(dāng)flex取值為1時(shí)，代表flex item平均占用 flex container
flex-grow：決定了flex items如何擴(kuò)展
1.可以設(shè)置任意非負(fù)數(shù)字（正小數(shù)、正整數(shù)、0），默認(rèn)值是0
當(dāng)flex container在main axis方向上有剩余尺寸時(shí)，flex-grow屬性才會(huì)生效
2. 如果所有flex items的flex-grow總和超過1，那么每個(gè)flex item擴(kuò)展的尺寸為
? ? 剩余尺寸 * flex-grow/總和
3.如果所有flex items的flex-grow總和不超過1，那么每個(gè)flex item擴(kuò)展的尺寸為
? ? 剩余尺寸 * flex-grow
總體意思就是用flex-grow的值乘以剩余尺寸，再加到對應(yīng)的元素上
4.flex items擴(kuò)展后的最終尺寸不能超過max-width/max-height
flex-basis:可以設(shè)置主軸元素的大小
他的權(quán)重大于元素自身的寬度（一般直接設(shè)置寬度）
flex-shrink(收縮)收縮的最小寬度為里面內(nèi)容的寬度
默認(rèn)值為1
（同flex-grow意思相同，flex-shrink的取值越高，收縮尺寸越大）
flex items收縮后的最終尺寸不能小于min-width/min-height
order：決定了flex items的排布順序，默認(rèn)值auto（很少使用）
1.可以設(shè)置任意整數(shù)（正整數(shù)、負(fù)整數(shù)、0），值越小就越排在前面
2.默認(rèn)值是0
slign-self：給某個(gè)特定的元素添加對其方式
1. 遵從flex containerDe align-items設(shè)置
2. stretch、flex-start、flex-end、center、baseline，效果跟align-items一致
