web布局之flex

作用在整体

flex-direction：row | column | row-reverse| column-reverse justify-content：项目群在主轴的对齐方式

• flex-start
• flex-end
• center
• space-between
• space-around

align-items：项目群在交叉轴的对其方式

• flex-start
• flex-end
• center

align-content：换行之后，多个轴的上下对齐方式(需要设置flex-wrap)

• flex-start
• flex-end
• center
• space-between
• space-around

作用在单个元素

align-self：单个元素在交叉轴对齐方式，flex-start | flex-end | center

flex-grow：放大比例，默认0，有剩余空间才扩张，按占的比重分放大
flex-shrink：缩小比例，默认1，空间不够才缩小，按占的比重分缩小
flex-basis：初始尺寸，默认是auto项目本身大小
flex：0 1 auto，flex-grow、flex-shrink、flex-basis缩写，第一个参数必须要有

相关文章

https://blog.csdn.net/qq_46048008/article/details/126406331