Flexbox布局中的FGS（Flex Grow/Shrink）计算因子与剩余空间分配算法
大家好！今天我们深入探讨Flexbox布局中一个至关重要的概念：FGS，即Flex Grow, Flex Shrink和 Flex Basis。我们将详细分析这些属性如何协同工作，决定Flexbox容器内项目（flex items）的大小，并理解剩余空间的分配算法。我们将通过代码示例，表格和详尽的解释，确保大家彻底掌握这一核心知识点。
1. Flexbox模型概览
在深入FGS之前，我们先回顾一下Flexbox模型的基本概念。Flexbox是一种一维的布局模型，意味着它一次处理一个维度上的布局（要么是主轴，要么是交叉轴）。Flexbox容器通过 display: flex; 或 display: inline-flex; 属性创建。容器内的直接子元素自动成为flex items。
Flexbox的主要属性包括：
flex-direction: 定义主轴的方向 (row, column, row-reverse, column-reverse)。justify-content: 定义项目在主轴上的对齐方式。align-items: 定义项目在交叉轴上的对齐方式。align-content: 定义多行（换行）flex容器在交叉轴上的对齐方式。flex-wrap: 定义是否允许项目换行。
2. FGS：Flex Grow, Flex Shrink, Flex Basis
FGS是控制flex items大小的核心属性。它们共同决定了flex item如何分配flex容器内的可用空间。
-
flex-grow: 定义了flex item相对于其他flex items的增长比例。当flex容器有剩余空间时，flex-grow属性决定了每个item可以占据多少剩余空间。默认值为0，表示该项目不会增长。 -
flex-shrink: 定义了flex item相对于其他flex items的收缩比例。当flex容器空间不足时，flex-shrink属性决定了每个item可以收缩多少。默认值为1，表示该项目可以收缩。 -
flex-basis: 定义了flex item在分配剩余空间之前的初始大小。可以理解为项目在伸缩之前的“基准”大小。可以设置为auto(默认值)、content、length(像素、百分比等)。
3. flex属性简写
flex属性是一个简写属性，用于同时设置 flex-grow, flex-shrink 和 flex-basis。
flex: flex-grow flex-shrink flex-basis;
一些常见的flex简写值：
| 值 | 等价于 | 描述 |
|---|---|---|
flex: auto; |
flex: 1 1 auto; |
项目会根据内容自动调整大小，并在需要时伸缩以适应容器。 |
flex: initial; |
flex: 0 1 auto; |
项目的大小基于其宽度和高度属性。它允许收缩以适应容器，但不允许增长。 |
flex: none; |
flex: 0 0 auto; |
项目的大小基于其宽度和高度属性。它既不允许伸缩，也不允许收缩。 |
flex: <number>; |
flex: <number> 1 0; |
flex-grow被设置为指定的值，flex-shrink设置为1，flex-basis设置为0%。项目会根据指定的比例增长以填充容器。 |
4. Flex Grow 计算因子与剩余空间分配
当flex容器有剩余空间时，flex-grow属性决定了如何分配这些空间。 算法如下：
-
计算剩余空间: 首先，计算flex容器内剩余的空间。 剩余空间 = 容器的宽度 – 所有flex items的
flex-basis总和。 -
确定增长因子: 确定每个flex item的
flex-grow值。 -
计算增长份额: 将所有flex items的
flex-grow值相加，得到总的增长因子。 -
分配剩余空间: 每个flex item将获得的增长空间 = (该item的
flex-grow/ 总增长因子) * 剩余空间。 -
最终大小: 每个flex item的最终大小 = 该item的
flex-basis+ 该item获得的增长空间。
代码示例 (Flex Grow)
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 500px;
height: 100px;
background-color: #f0f0f0;
}
.item {
background-color: #ddd;
margin: 5px;
text-align: center;
line-height: 90px; /* 居中文字 */
}
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 1; }
</style>
</head>
<body>
<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>
</body>
</html>分析:
-
容器宽度: 500px
-
Item 1:
flex-grow: 1,flex-basis: auto(默认为内容宽度，假设内容宽度为50px) -
Item 2:
flex-grow: 2,flex-basis: auto(默认为内容宽度，假设内容宽度为50px) -
Item 3:
flex-grow: 1,flex-basis: auto(默认为内容宽度，假设内容宽度为50px) -
总内容宽度：50 + 50 + 50 = 150px
-
总margin宽度：5 * 6 = 30px (6个margin，每个5px)
-
flex-basis总和： 150+30 = 180px -
剩余空间: 500px – 180px = 320px
-
总增长因子: 1 + 2 + 1 = 4
-
Item 1 获得的增长空间: (1 / 4) * 320px = 80px
-
Item 2 获得的增长空间: (2 / 4) * 320px = 160px
-
Item 3 获得的增长空间: (1 / 4) * 320px = 80px
-
Item 1 最终大小: 50px + 80px + 10px (margin) = 140px
-
Item 2 最终大小: 50px + 160px + 10px (margin) = 220px
-
Item 3 最终大小: 50px + 80px + 10px (margin) = 140px
表格总结 Flex Grow
| Item | flex-grow | flex-basis | 增长因子占比 | 增长空间 | 最终大小 |
|---|---|---|---|---|---|
| Item 1 | 1 | auto (50px) | 1/4 | 80px | 140px |
| Item 2 | 2 | auto (50px) | 2/4 | 160px | 220px |
| Item 3 | 1 | auto (50px) | 1/4 | 80px | 140px |
5. Flex Shrink 计算因子与空间收缩
当flex容器空间不足时，flex-shrink属性决定了如何收缩flex items。算法比flex-grow稍微复杂，因为它涉及到项目的 flex-basis。
-
计算超出空间: 首先，计算flex容器超出其内容的空间。 超出空间 = 所有flex items的
flex-basis总和 – 容器的宽度。 -
确定收缩因子: 确定每个flex item的
flex-shrink值。 -
计算加权收缩因子: 计算每个flex item的加权收缩因子 =
flex-shrink*flex-basis。 -
计算总加权收缩因子: 将所有flex items的加权收缩因子相加。
-
分配收缩空间: 每个flex item需要收缩的空间 = (该item的加权收缩因子 / 总加权收缩因子) * 超出空间。
-
最终大小: 每个flex item的最终大小 = 该item的
flex-basis– 该item需要收缩的空间。
代码示例 (Flex Shrink)
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 300px; /* 容器宽度小于内容总宽度 */
height: 100px;
background-color: #f0f0f0;
}
.item {
background-color: #ddd;
margin: 5px;
text-align: center;
line-height: 90px; /* 居中文字 */
width: 150px; /* 每个item的初始宽度 */
}
.item1 { flex-shrink: 1; }
.item2 { flex-shrink: 2; }
.item3 { flex-shrink: 1; }
</style>
</head>
<body>
<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>
</body>
</html>分析:
-
容器宽度: 300px
-
Item 1:
flex-shrink: 1,flex-basis: 150px -
Item 2:
flex-shrink: 2,flex-basis: 150px -
Item 3:
flex-shrink: 1,flex-basis: 150px -
总
flex-basis宽度：150 + 150 + 150 = 450px -
总margin宽度：5 * 6 = 30px (6个margin，每个5px)
-
总
flex-basis+ margin： 450 + 30 = 480px -
超出空间: 480px – 300px = 180px
-
Item 1 加权收缩因子: 1 * 150px = 150
-
Item 2 加权收缩因子: 2 * 150px = 300
-
Item 3 加权收缩因子: 1 * 150px = 150
-
总加权收缩因子: 150 + 300 + 150 = 600
-
Item 1 需要收缩的空间: (150 / 600) * 180px = 45px
-
Item 2 需要收缩的空间: (300 / 600) * 180px = 90px
-
Item 3 需要收缩的空间: (150 / 600) * 180px = 45px
-
Item 1 最终大小: 150px – 45px + 10px(margin) = 115px
-
Item 2 最终大小: 150px – 90px + 10px(margin) = 70px
-
Item 3 最终大小: 150px – 45px + 10px(margin) = 115px
表格总结 Flex Shrink
| Item | flex-shrink | flex-basis | 加权收缩因子 | 收缩空间 | 最终大小 |
|---|---|---|---|---|---|
| Item 1 | 1 | 150px | 150 | 45px | 115px |
| Item 2 | 2 | 150px | 300 | 90px | 70px |
| Item 3 | 1 | 150px | 150 | 45px | 115px |
6. Flex Basis 的作用
flex-basis 定义了项目在分配剩余空间之前的初始大小。 理解 flex-basis 的作用至关重要。
- 如果
flex-basis设置为auto(默认值)，则项目的大小取决于其内容或width/height属性 (如果设置了)。 - 如果
flex-basis设置为具体的长度值 (例如100px,20%)，则该值将作为项目在分配剩余空间之前的初始大小。
代码示例 (Flex Basis)
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 500px;
height: 100px;
background-color: #f0f0f0;
}
.item {
background-color: #ddd;
margin: 5px;
text-align: center;
line-height: 90px; /* 居中文字 */
}
.item1 { flex-basis: 100px; flex-grow: 1;}
.item2 { flex-basis: 200px; flex-grow: 2;}
.item3 { flex-basis: auto; flex-grow: 1;}
</style>
</head>
<body>
<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>
</body>
</html>分析:
-
容器宽度: 500px
-
Item 1:
flex-basis: 100px,flex-grow: 1 -
Item 2:
flex-basis: 200px,flex-grow: 2 -
Item 3:
flex-basis: auto,flex-grow: 1（假设内容宽度为50px） -
总的固定
flex-basis宽度：100 + 200 = 300px -
总margin宽度：5 * 6 = 30px (6个margin，每个5px)
-
flex-basis总和： 300 + 50 + 30= 380px -
剩余空间: 500px – 380px = 120px
-
总增长因子: 1 + 2 + 1 = 4
-
Item 1 获得的增长空间: (1 / 4) * 120px = 30px
-
Item 2 获得的增长空间: (2 / 4) * 120px = 60px
-
Item 3 获得的增长空间: (1 / 4) * 120px = 30px
-
Item 1 最终大小: 100px + 30px + 10px(margin) = 140px
-
Item 2 最终大小: 200px + 60px + 10px(margin) = 270px
-
Item 3 最终大小: 50px + 30px + 10px(margin) = 90px
7. 处理 min-width 和 max-width
min-width 和 max-width 属性会影响 flex item 的大小。Flexbox布局引擎在计算空间分配时，会考虑这些属性。
min-width：项目不能小于这个值。max-width：项目不能大于这个值。
即使 flex-shrink 试图将项目收缩到小于 min-width 的值，项目也不会小于 min-width。 同样，即使 flex-grow 试图将项目增大到大于 max-width 的值，项目也不会大于 max-width。
8. 实际应用与最佳实践
- 响应式布局:
flex-grow和flex-shrink非常适合创建响应式布局。通过设置不同的flex-grow值，可以让项目在不同屏幕尺寸上自适应地伸缩。 - 等高布局: 使用
align-items: stretch;可以轻松实现等高布局。 - 避免过度使用
flex: 1;: 虽然flex: 1;很方便，但过度使用可能会导致布局难以预测。 尽量显式地设置flex-grow,flex-shrink和flex-basis，以更好地控制项目的大小。 - 理解计算过程: 掌握FGS的计算过程是调试Flexbox布局的关键。 使用浏览器的开发者工具可以帮助你理解每个项目的最终大小。
9. 常见问题与调试
- 布局不符合预期: 检查
flex-direction,justify-content,align-items和align-content属性是否设置正确。 - 项目无法伸缩: 检查
flex-grow和flex-shrink是否设置为 0。 - 项目超出容器: 检查
flex-basis和max-width是否设置正确。 - 使用开发者工具: 浏览器的开发者工具可以帮助你检查每个flex item的计算大小，以及容器的剩余空间。
10. 总结：灵活伸缩，精准掌控
我们深入研究了Flexbox布局中的FGS属性及其计算因子，以及剩余空间的分配算法。 了解flex-grow、flex-shrink、flex-basis的交互作用，并掌握它们背后的计算逻辑，是创建复杂且灵活的响应式布局的关键。 记住，理解这些概念能够帮助我们更好地掌握Flexbox布局，并解决实际开发中遇到的问题。
更多IT精英技术系列讲座，到智猿学院