前言
在做前端页面布局的过程中，我们经常使用 Flexbox 布局。Flexbox 布局非常的灵活，可以方便地实现各种不同的布局方式。但是，有时候我们需要在多行中等分元素，这时候在使用 Flexbox 布局中便会出现一些问题。本文将为大家介绍在 Flexbox 布局中如何实现多行等分的布局方式。
Flexbox 布局的基本概念
在使用 Flexbox 布局时，需要对 Flexbox 的一些基本概念进行了解。这样可以更加方便地实现页面布局。下面是 Flexbox 布局的一些基本概念：
Flex Container
Flex Container 是使用 Flexbox 布局的容器。在容器中，使用 display:flex 或 display:inline-flex 来启用 Flexbox 布局。Flex Container 的子元素称为 Flex Item。
Flex Item
Flex Item 是 Flex Container 中的子元素。这些元素使用 Flexbox 布局，它们的布局是由 Flex Container 来控制的。
Flex Axis
Flex Axis 是一条线，它与 Flex Container 平行。在 Flex Container 中，有两个轴线：主轴（Main Axis）和交叉轴（Cross Axis）。
Main Axis
Main Axis 是 Flex Container 的主轴线。所有的 Flex Item 都是在主轴线上排列的。在 Flexbox 布局中，可以通过 flex-direction 属性来指定主轴线的方向。
Cross Axis
Cross Axis 是 Flex Container 的交叉轴线。在 Flex Container 中，与主轴线垂直的轴线就是交叉轴线。在 Flexbox 布局中，可以通过 align-items 属性来指定 Flex Item 在交叉轴线上的对齐方式。
解决多行等分的布局问题
在实现多行等分布局时，Flexbox 布局中需要用到以下两个属性：
- flex-wrap：该属性控制 Flex Item 是否换行。
- flex-basis：该属性指定 Flex Item 在主轴上的初始大小。
下面我们通过一个实例来讲解如何实现多行等分的布局方式。
实例代码
---------- - -------- ----- ---------- ----- - ----- - ----- - - ----------- - ------ ------------- ----- -------------- ----- -
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
代码解析
container
首先，在容器上启用 Flexbox 布局。
---------- - -------- ----- ---------- ----- -
使用 flex-wrap 属性来指定 Flex Item 是否换行。当 Flex Item 在容器中放不下时，就会自动换行。
item
接下来，设置 Flex Item 的样式。
----- - ----- - - ----------- - ------ ------------- ----- -------------- ----- -
- 使用 flex 属性来设置 Flex Item 的伸缩比例。flex-grow 和 flex-shrink 属性的值都为 1，表示 Flex Item 可以自动伸缩，而 flex-basis 属性的值为 calc(33.33% - 10px)，表示在主轴线上的初始大小为 33.33% 减去 10px（margin-right 的值）。
- 使用 margin-right 和 margin-bottom 来设置 Flex Item 的间距。
这里，我们使用 calc 函数来计算每一个 Flex Item 的宽度。这样就可以很好地解决在多行中等分元素的问题。
总结
Flexbox 布局使用起来非常方便，并且灵活性很高。实现多行等分布局时，可以使用 flex-wrap 和 flex-basis 属性来控制 Flex Item 在主轴线上的大小和换行。这样可以很好地解决多行等分的问题。希望本文对大家有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65212ffd95b1f8cacd8ae201