所谓等分布局，指的是一个容器中的子元素等分占据容器空间。在以往的布局中，我们可能需要结合定位或者浮动来实现，但在 Flexbox 布局中，实现等分布局非常简单和优雅。下面我们就来深入了解一下。
1. Flexbox 布局介绍
Flexbox 布局是 CSS3 中的一种新的布局方式，通过使用 Flexbox，我们可以轻松为一个容器中的子元素分配空间，并控制子元素的位置、大小、次序等。具体来说，Flexbox 布局有以下几个核心的概念：
- 父元素（Flex 容器）：包含所有的子元素，通过设置 display: flex 或者 display: inline-flex 实现。
- 子元素（Flex 项目）：Flex 容器的子元素。
- 主轴（Main Axis）：Flexbox 布局中的一个重要概念，通过 flex-direction 属性来控制。默认情况下为水平方向（row），我们也可以设置为垂直方向（column）。
- 交叉轴（Cross Axis）：与主轴垂直的方向。
通过合理控制 Flex 容器和 Flex 项目的属性，我们可以达到各种灵活的布局效果。
2. Flexbox 布局中实现等分布局
在 Flexbox 布局中，实现等分布局可以通过设置 flex 属性来实现。这个属性用于控制项目在主轴上的占比，值为一个数字，可以是一个整数或者一个比例。
假设我们有一个 div 容器，其中包含三个子元素：
<div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div>
接下来，我们来看看如何使用 Flexbox 实现等分布局。
2.1 设置 Flexbox 容器的属性
首先，我们需要设置容器的一些属性，包括：
- display: flex：将容器设置为 Flex 容器。
- justify-content: space-between：将子元素等间隔分布在主轴上，两端不留空白。
.container { display: flex; justify-content: space-between; }
设置之后，你会发现三个子元素已经等间隔分布在容器的主轴上了。不过，这并不是完全等分的布局，它们之间仍然存在小量的空白。
2.2 设置子元素的属性
接下来，我们来设置子元素的两个属性，分别是：
- flex-grow：指定子元素的伸展比例，即占据剩余空间的比例。默认值为 0，也就是不会占据剩余空间。
- flex-basis：指定子元素在主轴上的初始大小。默认值为 auto，也就是取决于子元素本身的大小。
为了让三个子元素等分占据主轴空间，我们可以先将 flex-grow 设置为 1，然后将 flex-basis 设置为 0。
.item { flex-grow: 1; flex-basis: 0; }
这样，我们成功实现了 Flexbox 布局中的等分布局。
3. 示例代码
下面是完整的示例代码：
<div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - ---------- -- ----------- -- -展开代码
4. 总结
通过上面的介绍，我们可以看到，在 Flexbox 布局中实现等分布局非常简单和优雅。只需要通过设置容器和子元素的属性即可。相比于传统的布局方式，Flexbox 布局更加直观和强大，可以极大地简化我们的工作。因此，学习并掌握 Flexbox 布局是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3637b83d39b4881767c07
