在前端开发中，常常需要实现多个子元素平均分配父容器的宽度。这一任务在过去可能需要使用复杂的 CSS 布局或者 JavaScript 来实现，但是现在，我们可以使用 Flexbox 来轻松地实现这一效果。
什么是 Flexbox？
Flexbox 是一种 CSS 布局模式，它提供了一种灵活的方式来布局和排列元素，以应对各种不同的应用场景。它可以轻松地实现多列布局、水平和垂直居中、自适应布局等等。
Flexbox 布局是基于容器和子项的概念。容器是一个包含了多个子项的元素，而子项则是容器中的每一个元素。通过设置容器的属性，可以控制子项的排列方式、大小、间距等等。
如何使用 Flexbox 实现子项平均分配父容器宽度？
在 Flexbox 中，可以使用 justify-content 属性来控制子项在主轴上的排列方式。其中，justify-content: space-between 可以让子项沿主轴平均分配父容器的宽度，同时在子项之间留有相等的空白间距。
.container {
display: flex;
justify-content: space-between;
}
.item {
/* 子项样式 */
}上面的代码中，我们首先将容器设置为 Flex 布局，并且设置了 justify-content: space-between 属性。这样，子项就会沿主轴平均分配父容器的宽度。
示例代码
下面是一个使用 Flexbox 实现子项平均分配父容器宽度的完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----------
-------
---------- -
-------- -----
---------------- --------------
----------------- -----
-------- -----
-
----- -
----------------- -----
------ ------
------- -----
-
--------
-------
------
---- ------------------
---- -------------------
---- -------------------
---- -------------------
------
-------
-------在上面的代码中，我们创建了一个 .container 容器，并将其设置为 Flex 布局。然后，我们创建了三个 .item 子项，并将它们放在了容器中。最后，我们使用 justify-content: space-between 属性来让子项沿主轴平均分配父容器的宽度。
总结
使用 Flexbox 可以轻松地实现多个子项平均分配父容器的宽度。通过设置 justify-content: space-between 属性，可以让子项沿主轴平均分配父容器的宽度，同时在子项之间留有相等的空白间距。这一技术可以在多种应用场景中使用，为前端开发带来了更大的灵活性和便利性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6630cbfbd3423812e4ea9afa