（1）flex实现自动多列布局

• 实现核心：wrap自动换行、flex-grow自动放大、flex-shrink不缩小
• 缺点：最后一行的宽度可能与前面不一致，排版不协调（grid自动多列布局没有这个问题）
• flex-grow：0（默认值，不放大）
• flex-shrink：1（默认值，自动根据需要缩小）
• flex是flex-grow, flex-shrink, flex-basis三者的简写属性
• flex:1 代表flex-grow:1; flex-shrink:1; flex-basis:0%;（无法实现）
• flex:1 0;（无效）
• flex:1 0 auto;（可以实现下面效果）
• flex-grow:1;（也可以实现下面效果）

返回首页