7. flex: 1 的作用

总结

1. flex: 1 等同于 flex: 1 1 auto 等同于 flex-grow: 1，flex-shrink: 1，flex-basis: auto

在使用 Flexbox 布局时，flex: 1 是一个非常常用的简写属性，它可以让子元素自动伸缩以填充容器的剩余空间。

简介

flex 属性用于控制 Flex 容器中子元素如何伸缩。它是一个简写属性，可以同时设置以下三个属性：

• flex-grow：定义项目的放大比例，默认为 0。
• flex-shrink：定义项目的缩小比例，默认为 1。
• flex-basis：定义在分配多余空间之前，项目的空间大小，默认为 auto。

flex: 1 的含义

flex: 1;

等价于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

这意味着：

• 元素会根据容器的剩余空间进行伸展（grow）。
• 同时也允许该元素在空间不足时收缩（shrink）。
• 初始大小基于内容（auto）。

示例

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
}

在这个例子中，所有 .item 元素将平均分配容器中的可用空间。

不同 flex 值的对比

实际应用场景

1. 均分空间：多个子项需要平分父容器宽度或高度时。
2. 自适应布局：某个区域需要尽可能占据剩余空间（如侧边栏、主内容区）。
3. 响应式设计：配合媒体查询实现不同屏幕尺寸下的灵活布局。