【CSS篇】flex: 1表示什么？

在使用 Flex 布局 时，我们经常会看到或使用到 flex: 1 这个简写属性。它看起来简单，但背后其实包含了三个重要的子属性：

flex: flex-grow flex-shrink flex-basis;

---

🔍 flex: 1 的完整含义

当你写下：

.item {
  flex: 1;
}

这实际上是以下写法的简写：

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

也就是说：

属性	值	含义说明
flex-grow	1	如果容器有剩余空间，该项目将按比例放大填充空间
flex-shrink	1	如果容器空间不足，该项目将按比例缩小
flex-basis	0%	在分配多余空间之前，该项目的主轴尺寸为 0

📌 总结一句话：

flex: 1 表示这个项目会自动伸缩以填满容器中剩余的空间。

---

📌 使用场景举例

✅ 场景一：等分布局（最常见）

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
}

📌 效果：A、B、C 三个元素将平均分配父容器的宽度，无论内容多少。

---

✅ 场景二：左侧固定 + 右侧自适应

<div class="layout">
  <div class="left">左侧菜单</div>
  <div class="content">主要内容</div>
</div>

.layout {
  display: flex;
}

.left {
  width: 200px; /* 固定宽度 */
}

.content {
  flex: 1; /* 自动伸展，填满剩余空间 */
}

📌 效果：左侧宽度固定，右侧自动扩展填满整个容器。

---

⚠️ 注意事项

问题点	说明
不要滥用 flex: 1	所有子项都设置 flex: 1 会导致所有元素平分空间，可能不符合预期
flex-basis: 0% 的影响	会忽略子元素原本的 padding 和 border，可能导致布局压缩
配合 gap 使用	Flex 容器中使用 gap 设置间距更方便，不需要额外 margin/padding

---

💡 拓展知识：常见的 flex 简写值

写法	实际效果	适用场景
flex: 0 1 auto	默认值，不放大但可缩小	默认行为
flex: 1	1 1 0%，自动伸展填满空间	等分布局
flex: 0 0 auto	不伸缩，保持原始大小	固定尺寸
flex: 0 0 100px	固定宽度 100px，不可伸缩	精确控制
flex: 2	放大比例为 2，比 flex: 1 大一倍	不等比分配

---

📌 总结

关键点	说明
flex: 1 是 flex-grow: 1, flex-shrink: 1, flex-basis: 0% 的简写
表示该元素将自动伸缩以填满容器中剩余空间
广泛用于等分布局、响应式设计、自适应区域
推荐结合 flex-wrap、justify-content 等使用，实现更复杂的布局