请解释 CSS 中 flex: 1 这一属性的含义及其作用。

回答思路

1. 【回答框架 1】flex: 1 是 flex-grow、flex-shrink、flex-basis 三个属性的简写，具体值为 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。它表示项目会根据容器剩余空间按比例放大，允许缩小，初始主轴尺寸为 0，因此所有设为 flex: 1 的项目会均分容器可用空间。
2. 【回答框架 2】flex-basis: 0% 是关键，它使项目在分配空间前不占用基础尺寸，从而保证所有项目从同一起点分配剩余空间。若只设置 flex-grow: 1 而保留默认的 flex-basis: auto，项目会基于自身内容宽度分配，导致不等宽。
3. 【回答框架 3】应用场景：常用于等分布局，比如导航栏菜单项、卡片列表等需要均分父容器宽度的场景。与 flex: none 或具体数值组合使用可控制弹性行为。
4. 【关键点 1】flex: 1 等价于 flex: 1 1 0%。
5. 【关键点 2】flex-grow: 1 使项目按比例放大；flex-shrink: 1 允许项目缩小；flex-basis: 0% 使项目初始尺寸为 0。
6. 【关键点 3】多个 flex: 1 项目会均分容器剩余空间。
7. 【关键点 4】flex-basis: auto 时，项目会根据内容宽度分配。
8. 【易错点 1】误以为 flex: 1 只设置 flex-grow，导致忽略 flex-basis 的影响。
9. 【易错点 2】混淆 flex: 1 与 flex: auto（flex: 1 1 auto）的区别。