在使用 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 等使用,实现更复杂的布局 |