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精英技术系列讲座，到智猿学院

Flexbox布局中的FGS（Flex Grow/Shrink）计算因子与剩余空间分配算法

发表回复 取消回复

发表回复取消回复