flex: 1 是 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0 的简写，关键在 flex-basis: 0，使元素忽略自身内容宽度，均分容器剩余空间，而非等比缩放。
flex: 1 到底做了什么？
flex: 1 是 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0 的简写。关键在 flex-basis: 0 —— 它让元素“放弃”自身内容宽度，把剩余空间当白纸均分。这不是等比缩放，而是等份额分配容器剩余空间。
- 如果子项内容宽度差异大（比如一个空
div，一个含长文本的span），flex: 1后它们视觉宽度会接近相等，但并非按原始宽高比缩放 - 真正的“等比缩放”需配合
aspect-ratio或padding-top技巧约束比例，flex只负责分配宽度/高度空间
flex-grow: 1 和 flex: 1 有啥区别？
两者在多数场景效果一致，但语义和可控性不同：
-
flex-grow: 1单独设置时，flex-basis默认为auto（尊重内容尺寸），可能导致宽度不均 -
flex: 1隐式设flex-basis: 0，强制忽略原始尺寸，更接近“均分”预期 - 若需保留最小内容宽度（如按钮文字不被压扁），改用
flex: 1 1 auto或显式写flex-grow: 1; flex-basis: auto
想让图片或卡片等比缩放，光靠 flex 不够
Flexbox 控制的是布局分配，不干预内部渲染比例。要实现“容器变小，子元素按比例缩小且不畸变”，得组合使用：
- 给子元素设
aspect-ratio: 16 / 9（现代浏览器支持） - 或用传统 padding-bottom 百分比技巧：
.item { position: relative; width: 100%; } .item::before { content: ""; display: block; padding-bottom: 56.25%; /* 16:9 */ } .item > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } - 再套一层
flex: 1的父容器，才能既等分区域，又保持内部比例
常见翻车现场：flex: 1 没生效
- 父容器没设
display: flex 或 display: inline-flex
- 子元素写了
width 或 min-width，且值大于均分后空间 → flex-basis: 0 被覆盖，实际按设定宽度撑开
- 使用了
flex-direction: column 却只调 flex-grow，此时它影响的是高度分配，而非宽度
- 图片默认
flex-shrink: 1，但若设了 min-width: 100px，缩小时会被卡住
display: flex 或 display: inline-flex width 或 min-width，且值大于均分后空间 → flex-basis: 0 被覆盖，实际按设定宽度撑开 flex-direction: column 却只调 flex-grow，此时它影响的是高度分配，而非宽度 flex-shrink: 1，但若设了 min-width: 100px，缩小时会被卡住 真正要“等比缩放”，得先明确：是希望所有子项占据相等宽度（用 flex: 1），还是希望每个子项自身按原始比例响应式缩放（靠 aspect-ratio + max-width + object-fit）。两者常一起用，但职责完全不同。
立即学习“前端免费学习笔记（深入）”；
