标准答案
- flex 是 flex-grow、flex-shrink、flex-basis 的简写。
- 理解 flex 简写，要看三件事：能不能放大、能不能缩小、参与分配前的基础尺寸是多少。
- flex: 1 通常等价于 1 1 0%，表示可以放大、可以缩小，并且从 0 基础尺寸开始分配剩余空间，所以多个 flex: 1 项目通常会均分空间。
- flex: auto 等价于 1 1 auto，也能放大缩小，但基础尺寸来自内容或 width；flex: none 等价于 0 0 auto，不放大也不缩小。
- 一句话总结：flex: 1 偏按比例分空间，flex: auto 先尊重内容尺寸再分空间，flex: none 固定自身尺寸。
题目解析
flex: 1 和 flex: auto 最大区别在 flex-basis。一个从 0 开始分空间，一个从内容尺寸开始分空间。
不同浏览器和规范历史里 flex 简写有细节，但工程面试回答 1 1 0% 这个核心区别就够用。
代码示例
三个卡片都 flex: 1 时，会倾向于均分容器空间。
CSS
.cards {
display: flex;
}
.card {
flex: 1;
min-width: 0;
}
.avatar {
flex: none;
}常见误区
- 认为 flex: 1 就是 width: 100%。它是参与主轴剩余空间分配。
- 混淆 flex: 1 和 flex: auto，忽略 basis 不同。
- 给长文本 flex 子项设置 flex: 1，却忘记 min-width: 0。