flex: auto 与 flex: 1 的区别

两者都是 flex 简写属性，核心区别在于 flex-basis 的值不同。

展开对比

属性	flex: auto	flex: 1
flex-grow	1	1
flex-shrink	1	1
flex-basis	auto	0%

关键差异：flex-basis

• flex: auto → flex-basis: auto

  • 元素会先根据自身内容确定一个初始大小，然后再按比例分配容器中的剩余空间。
  • 内容多的元素，初始占的空间就大，最终分配到的空间也更大。

• flex: 1 → flex-basis: 0%

  • 元素忽略内容大小，初始大小为 0，所有空间都作为"剩余空间"按比例（1:1:1…）平均分配。
  • 无论内容多少，每个元素最终分到的空间完全相同。

直观示例

<div style="display: flex; width: 600px;">
  <div style="flex: auto;">短文本</div>
  <div style="flex: auto;">这是一段比较长的文本内容</div>
</div>

<div style="display: flex; width: 600px;">
  <div style="flex: 1;">短文本</div>
  <div style="flex: 1;">这是一段比较长的文本内容</div>
</div>

• 用 flex: auto：长文本的 div 会更宽（因为它的内容多，初始尺寸大，再等比放大剩余空间）。
• 用 flex: 1：两个 div 宽度完全相等，各占 300px。

如何选择

• flex: 1：需要子元素等宽分布时使用，最常见也最常用。
• flex: auto：需要子元素在等比分配的基础上，保留内容大小的差异时使用。

💡 简单记忆：flex: 1 是"从零开始平分"，flex: auto 是"先按内容占位，再平分剩余"。