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

1 阅读2分钟

在使用 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-grow1如果容器有剩余空间,该项目将按比例放大填充空间
flex-shrink1如果容器空间不足,该项目将按比例缩小
flex-basis0%在分配多余空间之前,该项目的主轴尺寸为 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: 11 1 0%,自动伸展填满空间等分布局
flex: 0 0 auto不伸缩,保持原始大小固定尺寸
flex: 0 0 100px固定宽度 100px,不可伸缩精确控制
flex: 2放大比例为 2,比 flex: 1 大一倍不等比分配

📌 总结

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