在前端开发中，布局是构建页面的关键环节。而 Flex 布局，也就是弹性布局，以其强大的功能和简洁的语法，成为了面试中的高频考点。今天，我们就来深入剖析 Flex 布局的综合属性、收缩计算和扩展计算。
一、Flex 布局综合属性概述
Flex 布局乍一看很简单，但实际上却有着丰富的内涵。它非常适合两列式、三列式布局，能够在一行上完成多列式划分，帮助我们轻松学习布局。
1. 元素特性
Flex 布局中的元素有不同的特性。行内元素在 Flex 布局中可以作为文字等内容的容器，具有不换行的行内特性。不过，它不太适合设置宽高。而块级元素则可以充分发挥盒子的能力，在里面放置各种内容，并且能和兄弟盒子和谐共处。
2. 显示模式与格式化上下文
我们可以通过 display 属性来设置或切换元素的显示模式，比如 flex 和 inline-flex 等。当使用 display: flex 时，就会创建一个 Flex 格式化上下文（FFC），让子元素按照弹性布局的规则排列。
3. 与其他布局方式对比
除了 Flex 布局，常见的布局方式还有 float 和 inline-block。但 Flex 布局在处理多列布局和元素对齐等方面更加方便和灵活。
二、Shrink 收缩计算
当 Flex 容器的空间不足以容纳所有子元素时，就需要进行收缩计算，让子元素分摊溢出的空间。下面我们通过一个具体的例子来详细讲解。
1. 示例条件
假设 Flex 容器存在 300px 的溢出空间，有两个子元素，它们的 flex-shrink 值分别为 2 和 1，初始宽度分别为 500px 和 400px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 弹性布局收缩</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
width: 600px;
height: 300px;
}
.left {
flex: 1 2 500px;
background-color: red;
}
.right{
flex: 2 1 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
左边占位收缩：
右边占位收缩：
2. 计算步骤
- 计算总权重：总权重的计算方法是每个子元素的初始宽度乘以其
flex-shrink值，然后相加。即 500×2+400×1=1400。 - 计算每个子元素的分摊比例：用每个子元素的初始宽度乘以其
flex-shrink值，再除以总权重。第一个子元素的分摊比例为 500×2/1400≈0.714，即 71.4%；第二个子元素的分摊比例为 400×1/1400≈0.286，即 28.6%。 - 计算每个子元素需要分摊的溢出空间：用溢出空间乘以每个子元素的分摊比例。第一个子元素需要分摊的溢出空间为 300×0.714=214.29px；第二个子元素需要分摊的溢出空间为 300×0.286=85.71px。
- 计算收缩后的宽度：用每个子元素的初始宽度减去其需要分摊的溢出空间。第一个子元素收缩后的宽度为 500−214.29=285.71px；第二个子元素收缩后的宽度为 400−85.71=314.29px。
三、Grow 扩展计算
当 Flex 容器有多余的空间时，就需要进行扩展计算，让子元素按比例分配这些多余的空间。
1. 示例条件
假设 Flex 容器的宽度为 600px，两个子元素的初始宽度分别为 300px 和 200px，flex-grow 值分别为 1 和 2。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局扩展</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
width: 600px;
height: 300px;
}
.left{
flex: 1 2 300px;
background-color: red;
}
.right{
flex: 2 1 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<!-- FFC 弹性格式化上下文 -->
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
左边占位扩展：
右边占位扩展：
2. 计算步骤
- 计算多余的空间：用 Flex 容器的宽度减去所有子元素的初始宽度之和，即 600−300−200=100px。
- 计算每个子元素的扩展比例：总扩展比例为 1+2=3。第一个子元素的扩展比例为 1/3；第二个子元素的扩展比例为 2/3。
- 计算每个子元素扩展的宽度：用多余的空间乘以每个子元素的扩展比例。第一个子元素扩展的宽度为 100×1/3≈33.33px；第二个子元素扩展的宽度为 100×2/3≈66.66px。
四、代码示例验证
下面是一个简单的 HTML 和 CSS 代码示例，展示了 Flex 布局的应用：
在这个示例中，.container 是 Flex 容器，.left 和 .right 是子元素。通过设置 flex 属性，我们可以控制子元素的扩展和收缩行为。
五、总结
Flex 布局是前端开发中非常重要的布局方式，掌握其综合属性、收缩计算和扩展计算是应对面试的关键。通过本文的详细讲解和代码示例，相信你对 Flex 布局有了更深入的理解。在实际开发中，多动手实践，不断探索 Flex 布局的更多用法，你就能在面试和工作中轻松应对各种布局需求。
