image.png
------------------------- flex container -------------------------
flex-flow是flex-direction || flex-wrap的簡(jiǎn)寫
flex-direction設(shè)置主軸（main axis）的方向
flex-wrap設(shè)置是否換行
justify-content設(shè)置flex items在main axis上的對(duì)齊方式
align-items設(shè)置flex items在cross axis的對(duì)齊方式（一般是針對(duì)單行）
align-content設(shè)置flex items在cross axis上對(duì)齊方式（一般是針對(duì)多行）
------------------------- flex items -------------------------
flex是flex-grow flex-shrink? || flex-basis的簡(jiǎn)寫
flex-grow決定了flex items在main axis方向上如何擴(kuò)展
lex-shrink決定了flex items在main axis方向上如何收縮
flex-basis設(shè)置flex items在main axis方向上的base size
order設(shè)置flex items的排布順序
align-self允許flex items覆蓋flex container設(shè)置的align-items
flex container
flex-direction
決定了main axis的方向易桃，有4個(gè)取值
row(默認(rèn)值)、row-reverse厉亏、column毅哗、column-reverse
flex items默認(rèn)沿著main axis(主軸)從main start開始往main end方向排布
justify-content
決定了flex items在main axis上的對(duì)齊方式
flex-start(默認(rèn)值)：與main start對(duì)齊
flex-end：與main end對(duì)齊
center：居中對(duì)齊
space-between：與main start墨榄、main end兩端對(duì)齊貌夕；flex items之間的間距相等
space-around：與main start、main end之間的距離等于flex items之間的距離的一半胡桃；flex items之間的間距相等
space-evenly：與main start、main end之間的距離等于flex items之間的距離侈咕；flex items之間的間距相等
align-items
決定了flex items在 cross axis上的對(duì)齊方式
stretch(默認(rèn)值)：當(dāng)flex items在cross axis方向的size為auto時(shí)公罕，會(huì)自動(dòng)拉伸至填充flex container
flex-start：與cross start對(duì)齊
flex-end：與cross end對(duì)齊
center：居中對(duì)齊
baseline：與基線對(duì)齊
flex-wrap
決定flex container是單行還是多行
nowrap： 單行
wrap：多行
wrap-reverse：多行（對(duì)比wrap，cross start與cross end相反）
flex-flow:
flex-direction || flex-wrap的簡(jiǎn)寫
align-content:
決定了多行flex items在cross axis上的對(duì)齊方式耀销，用法與justify-content類似
stretch(默認(rèn)值)：與align-items的stretch類似
flex-start：與cross start對(duì)齊
flex-end：與cross end對(duì)齊
center：居中對(duì)齊
space-between：
space-around：
space-evenly：
flex items
align-self
order
flex-grow
決定了flex items如何擴(kuò)展
可以設(shè)置任意非負(fù)數(shù)字（正小數(shù)楼眷、正整數(shù)、0）树姨，默認(rèn)值是0
當(dāng)flex container在main axis方向上有剩余size時(shí)摩桶，flex-grow屬性才會(huì)有效
1.如果所有flex items的flex grow總和sum超過1， 每個(gè)flex item擴(kuò)展的size為 flex container的剩余size * flex-grow / sum
2.如果所有flex items的flex grow總和sum不超過1帽揪，每個(gè)flex item擴(kuò)展的size為 flex container的剩余size * flex-grow
3.flex items擴(kuò)展的最終size不超過max-width\max-height
flex-shrink:
決定了flex items如何收縮
可以設(shè)置任意非負(fù)數(shù)字（正小數(shù)硝清、正整數(shù)、0）转晰，默認(rèn)值是1
當(dāng)flex items在main axis方向上超過了flex container芦拿，flex-shrink屬性才會(huì)有效
每個(gè)flex item收縮的size為
flex items超出flex container的size * 收縮比例 / 所有flex items的收縮比例之和
收縮比例 = flex-shrink * flex item的base size
base size就是flex item放入flex container之前的size
flex items收縮的最終size不超過min-width\min-height
flex-basis
設(shè)置flex items在main axis方向上的base size
auto（默認(rèn)值）、content：取決于內(nèi)容本身的size
決定flex items最終base size的因素查邢，從優(yōu)先級(jí)高到底
1. max- 蔗崎、min-
2. flex-basis
3. width/height
4. 內(nèi)容本身的size
flex
是flex-grow flex-shrink? || flex-basis的簡(jiǎn)寫
? : 可有可無
默認(rèn)值是 0 1 auto
none：0 0 auto
