flex:1 和 flex:auto

在CSS Flexbox布局中，flex:1和flex:auto都是flex属性的简写形式，它们的主要区别在于flex-basis的值不同：

flex:1

• 等价于 flex: 1 1 0%
• 三个值分别代表：flex-grow:1（项目将按比例放大）、flex-shrink:1（项目将按比例缩小）、flex-basis:0%（项目的初始大小为0%）
• 特点：会忽略项目本身的内容宽度，所有设置了flex:1的项目将等分剩余空间

flex:auto

• 等价于 flex: 1 1 auto
• 三个值分别代表：flex-grow:1、flex-shrink:1、flex-basis:auto（项目的初始大小由内容决定）
• 特点：会先根据项目内容计算初始宽度，再将剩余空间按比例分配

关键区别

• flex:1 会使所有项目宽度相等，不受内容影响
• flex:auto 会使项目先保持内容宽度，再分配剩余空间

例如，如果两个项目分别设置flex:1和flex:auto，且容器空间有限时，flex:1的项目会被压缩到最小，而flex:auto的项目会优先保留内容所需空间。