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 控制的是布局分配，不干预内部渲染比例。要实现“容器变小，子元素按比例缩小且不畸变”，得组合使用：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 给子元素设 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，缩小时会被卡住

真正要“等比缩放”，得先明确：是希望所有子项占据相等宽度（用 flex: 1），还是希望每个子项自身按原始比例响应式缩放（靠 aspect-ratio + max-width + object-fit）。两者常一起用，但职责完全不同。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！