Flexbox 是一种强大的 CSS 布局模型，用于创建灵活的、响应式的布局。flex-grow、flex-shrink 和 flex-basis 是 Flexbox 中的关键属性，用于控制 Flex 项目的大小和行为。flex 是这三个属性的简写形式。本文将详细介绍这些属性的作用、用法以及实际应用场景。
1. flex-grow
作用：
- 定义 Flex 项目在容器中的扩展比例。
- 当容器有剩余空间时，
flex-grow决定项目如何分配这些空间。
取值：
- 默认值：
0（不扩展）。 - 正数：表示项目的扩展比例。
示例：
.item {
flex-grow: 1; /* 项目将扩展以填充剩余空间 */
}
说明：
- 如果所有项目的
flex-grow都为1，它们将等分剩余空间。 - 如果一个项目的
flex-grow为2，其他项目为1，则前者将获得两倍的剩余空间。
2. flex-shrink
作用：
- 定义 Flex 项目在容器中的收缩比例。
- 当容器空间不足时，
flex-shrink决定项目如何收缩。
取值：
- 默认值：
1（允许收缩）。 - 正数：表示项目的收缩比例。
- 0：禁止收缩。
示例：
.item {
flex-shrink: 0; /* 项目不会收缩 */
}
说明：
- 如果所有项目的
flex-shrink都为1，它们将等比例收缩。 - 如果一个项目的
flex-shrink为0，它将不会收缩，其他项目将收缩以填充空间。
3. flex-basis
作用：
- 定义 Flex 项目在分配剩余空间之前的初始大小。
- 类似于
width或height，但优先级更高。
取值：
- 默认值：
auto（根据内容自动调整大小）。 - 长度值：如
100px、50%等。
示例：
.item {
flex-basis: 200px; /* 项目的初始大小为 200px */
}
说明：
- 如果
flex-basis为auto，项目的大小将根据内容决定。 - 如果
flex-basis为0，项目的大小将完全由flex-grow和flex-shrink决定。
4. flex（简写属性）
作用：
flex是flex-grow、flex-shrink和flex-basis的简写形式。- 语法：
flex: <flex-grow> <flex-shrink> <flex-basis>。
常用值：
flex: 1：等价于flex: 1 1 0。- 项目可以扩展和收缩，初始大小为
0。
- 项目可以扩展和收缩，初始大小为
flex: auto：等价于flex: 1 1 auto。- 项目可以扩展和收缩，初始大小根据内容决定。
flex: none：等价于flex: 0 0 auto。- 项目不会扩展或收缩，初始大小根据内容决定。
示例：
.item {
flex: 1; /* 项目可以扩展和收缩，初始大小为 0 */
}
5. 实际应用场景
5.1 等分剩余空间
.container {
display: flex;
}
.item {
flex: 1; /* 所有项目等分剩余空间 */
}
5.2 固定宽度 + 自适应宽度
.container {
display: flex;
}
.sidebar {
flex: 0 0 200px; /* 固定宽度为 200px，不扩展不收缩 */
}
.content {
flex: 1; /* 自适应剩余空间 */
}
5.3 禁止收缩
.container {
display: flex;
}
.item {
flex: 1 0 auto; /* 项目可以扩展，但不会收缩 */
}
6. 总结
| 属性 | 作用 | 默认值 | 示例值 |
|---|---|---|---|
flex-grow | 定义项目的扩展比例 | 0 | 1、2 |
flex-shrink | 定义项目的收缩比例 | 1 | 0、1 |
flex-basis | 定义项目的初始大小 | auto | 200px、50% |
flex | 简写形式，定义 flex-grow、flex-shrink 和 flex-basis | 0 1 auto | 1、1 1 auto、none |
7. 注意事项
-
优先级：
flex-basis的优先级高于width或height。- 如果
flex-basis为auto，项目的大小将根据内容决定。
-
兼容性：
- Flexbox 在现代浏览器中得到了广泛支持，但在旧版浏览器中可能需要使用前缀。
-
性能：
- 使用
flex: 1时，浏览器会优先计算flex-grow和flex-shrink，适合用于动态布局。
- 使用