CSS中flex: 1的含义、解释、等价写法、使用场景及示例

flex: 1 是 CSS Flexbox 布局中的一个简写属性，用于设置弹性盒子的伸缩行为。具体来说，flex: 1 是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写形式。

详细解释：

• flex-grow: 1：表示该元素在容器中有剩余空间时，会按比例分配剩余空间。值为 1 表示它会与其他设置了 flex-grow 的元素一起按比例增长。
• flex-shrink: 1：表示该元素在容器空间不足时，会按比例缩小。值为 1 表示它会与其他设置了 flex-shrink 的元素一起按比例缩小。
• flex-basis: 0%：表示该元素的初始大小（基准值）为 0%，即它不会占用任何初始空间，完全依赖 flex-grow 和 flex-shrink 来调整大小。

等价写法：

flex: 1 等价于：

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

使用场景：

• 当你希望某个元素在容器中占据剩余空间时，可以使用 flex: 1。
• 例如，在一个包含多个子元素的 Flex 容器中，设置某个子元素为 flex: 1，可以让它占据剩余的空间，而其他子元素保持固定大小。

示例：

<div class="container">
  <div class="item">固定宽度</div>
  <div class="item flex-1">占据剩余空间</div>
</div>

.container {
  display: flex;
}
.item {
  border: 1px solid #000;
}
.flex-1 {
  flex: 1;
}

在这个例子中，.flex-1 的元素会占据容器中剩余的空间，而其他元素保持固定宽度。

总结：

flex: 1 是一种常用的布局技巧，用于实现灵活的、自适应的布局设计。它让元素能够根据容器的剩余空间动态调整大小，非常适合构建响应式页面。