image.png
------------------------- flex container -------------------------
flex-flow是flex-direction || flex-wrap的简写
flex-direction设置主轴（main axis）的方向
flex-wrap设置是否换行
justify-content设置flex items在main axis上的对齐方式
align-items设置flex items在cross axis的对齐方式（一般是针对单行）
align-content设置flex items在cross axis上对齐方式（一般是针对多行）
------------------------- flex items -------------------------
flex是flex-grow flex-shrink? || flex-basis的简写
flex-grow决定了flex items在main axis方向上如何扩展
lex-shrink决定了flex items在main axis方向上如何收缩
flex-basis设置flex items在main axis方向上的base size
order设置flex items的排布顺序
align-self允许flex items覆盖flex container设置的align-items
flex container
flex-direction
决定了main axis的方向，有4个取值
row(默认值)、row-reverse、column、column-reverse
flex items默认沿着main axis(主轴)从main start开始往main end方向排布
justify-content
决定了flex items在main axis上的对齐方式
flex-start(默认值)：与main start对齐
flex-end：与main end对齐
center：居中对齐
space-between：与main start、main end两端对齐；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上的对齐方式
stretch(默认值)：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
flex-start：与cross start对齐
flex-end：与cross end对齐
center：居中对齐
baseline：与基线对齐
flex-wrap
决定flex container是单行还是多行
nowrap： 单行
wrap：多行
wrap-reverse：多行（对比wrap，cross start与cross end相反）
flex-flow:
flex-direction || flex-wrap的简写
align-content:
决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
stretch(默认值)：与align-items的stretch类似
flex-start：与cross start对齐
flex-end：与cross end对齐
center：居中对齐
space-between：
space-around：
space-evenly：
flex items
align-self
order
flex-grow
决定了flex items如何扩展
可以设置任意非负数字（正小数、正整数、0），默认值是0
当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
1.如果所有flex items的flex grow总和sum超过1， 每个flex item扩展的size为 flex container的剩余size * flex-grow / sum
2.如果所有flex items的flex grow总和sum不超过1，每个flex item扩展的size为 flex container的剩余size * flex-grow
3.flex items扩展的最终size不超过max-width\max-height
flex-shrink:
决定了flex items如何收缩
可以设置任意非负数字（正小数、正整数、0），默认值是1
当flex items在main axis方向上超过了flex container，flex-shrink属性才会有效
每个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
设置flex items在main axis方向上的base size
auto（默认值）、content：取决于内容本身的size
决定flex items最终base size的因素，从优先级高到底
1. max- 、min-
2. flex-basis
3. width/height
4. 内容本身的size
flex
是flex-grow flex-shrink? || flex-basis的简写
? : 可有可无
默认值是 0 1 auto
none：0 0 auto
