flex: 1 是什么意思

flex: 1 是什么意思

flex: 1 是 flex-grow、flex-shrink、flex-basis 三个属性的简写，等价于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

各属性含义

• flex-grow：分配剩余空间的相对比例，默认 0。
• flex-shrink：空间不足时的收缩规则，默认 1。
• flex-basis：项目在主轴上的初始大小，默认 auto（即按内容大小）。

关键点

flex: 1 的 flex-basis: 0% 是它与 flex: auto（即 1 1 auto）的最大区别：所有子项初始大小都为 0，剩余空间按 flex-grow 比例分配；而 flex: auto 是按内容大小 + 剩余空间分配。

.parent { display: flex; }
.child { flex: 1; background: #eee; margin: 4px; }

<div class="parent">
  <div class="child">A</div>
  <div class="child">B</div>
  <div class="child">C</div>
</div>

来源整理自：vue3js.cn 面试官系列