flex: 1 的含义与实际运用

flex: 1 是 Flexbox 中 flex-grow、flex-shrink、flex-basis 三个属性的简写，常用于“可伸缩、占满剩余空间”的布局。

通常可理解为等价于：

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

备注：在不同浏览器实现与规范演进中，flex 简写的“省略值”细节容易混淆。工程实践里，你可以把 flex: 1 近似理解为“允许增长、允许收缩、并从 0 的基础尺寸开始参与剩余空间分配”，这也是它常用于等分/自适应布局的原因。

1. flex: 1 的具体含义

1.1 flex-grow

flex-grow 定义 增长系数：当 flex 容器在主轴方向上有剩余空间时，决定每个 flex 项目如何分配这些空间。

• 默认值为 0：即使有剩余空间也不会增长
• 设置为 1：会参与分配剩余空间
• 若某一项为 2、其他为 1：该项获得的剩余空间是其他项的 2 倍（按比例瓜分）

1.2 flex-shrink

flex-shrink 定义 收缩系数：当 flex 容器在主轴方向上空间不足时，决定每个 flex 项目如何收缩。

• 默认值为 1：空间不足时等比例收缩
• 设置为 0：该项不收缩（可能挤压其他项或产生溢出）

1.3 flex-basis

flex-basis 定义 参与分配空间前的基础尺寸（主轴方向上的“起步宽/高”）。它可以是长度（如 200px、20%、5rem）或关键字。

当 flex-basis: 0% 时，常被用来实现“更纯粹的等分/填充”：

• 在计算剩余空间分配时，基础尺寸从 0 开始
• 内容本身的尺寸不会先占一块“起步面积”再分剩余空间（更容易得到等宽列）

2. flex: 1 的应用场景

2.1 等分布局

想要创建等分列布局时，为所有子元素设置 flex: 1，可以让它们在容器尺寸变化时保持等宽（主轴为横向时等宽）。

<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
</div>

.container {
    display: flex;
}
.column {
    flex: 1;
}

2.2 自适应布局（固定侧边栏 + 自适应内容区）

典型的“左侧固定、右侧自适应”布局：侧边栏给定固定宽度，主内容区用 flex: 1 占满剩余空间。

<div class="layout">
    <aside class="sidebar">Sidebar</aside>
    <main class="content">Main Content</main>
</div>

.layout {
    display: flex;
}
.sidebar {
    width: 200px;
}
.content {
    flex: 1;
}

2.3 垂直居中（上下占位，中间内容居中）

在固定高度容器里，使用列方向 flex，让顶部和底部占位元素 flex: 1，中间内容自然落在正中间。

<div class="container">
    <div class="top"></div>
    <div class="middle">Centered Content</div>
    <div class="bottom"></div>
</div>

.container {
    display: flex;
    flex-direction: column;
    height: 300px;
}
.top,
.bottom {
    flex: 1;
}

3. 细节与注意事项

3.1 与其他 flex 值的比较

• flex: initial 等价于 flex: 0 1 auto（默认行为：不增长、可收缩、基础尺寸由内容/width 决定）
• flex: auto 等价于 flex: 1 1 auto（可增长可收缩，但基础尺寸会参考内容/width）
• flex: none 等价于 flex: 0 0 auto（既不增长也不收缩，基本“固定”）

3.2 百分比与 flex-basis

当 flex-basis 使用百分比时，它是相对于 flex 容器主轴尺寸 计算的。

而 flex: 1 中常见的 flex-basis: 0% 可以理解为：让项目在参与“剩余空间分配”时从 0 起步，从而更容易得到均分或“填满剩余”的效果。

3.3 flex 项目的最小尺寸（常见坑：需要 min-width: 0）

默认情况下，flex 项目的 min-width（横向主轴时）为 auto，意味着它可能会被内容撑开，导致：

• 即使设置了 flex: 1，也无法按预期收缩
• 出现内容溢出、挤压、布局不均等问题

常见解决方式是在需要收缩的 flex 子项上显式设置：

.item {
    min-width: 0;
}

（如果主轴为纵向，对应的常见处理是 min-height: 0。）

3.4 嵌套的 flex 容器

嵌套 flex 很常见（外层控制整体分栏，内层控制局部排列）。实践中建议：

• 外层决定“区域如何分配”（例如侧边栏 + 内容区）
• 内层再决定“区域内部如何布局”（例如内容区内部的列表、输入框、按钮排列）
• 遇到子项不收缩/滚动不生效时，优先检查：
  • 哪一层需要 min-width: 0 / min-height: 0
  • 是否需要对子项加 overflow: auto/hidden