flex布局平均分配

flex布局可以实现元素的平均分配。在flex布局中，可以通过设置flex容器的属性来实现元素的平均分配。具体来说，我们可以使用flex属性来控制元素在flex容器中的占比。设置每个元素的flex属性为相同的值，就可以实现元素的平均分配。

举个例子，假设我们有一个flex容器，并且容器内有三个子元素。我们可以设置每个子元素的flex属性为1，这样每个子元素都会平均占据容器的宽度或者高度。这样就实现了元素的平均分配。

例如，下面是一个使用flex布局实现元素平均分配的示例代码：

<style>
  .container {
    display: flex;
    flex-direction: row; /* 水平方向排列 */
    justify-content: space-between; /* 平均分配 */
  }
  .item {
    flex: 1; /* 设置每个子元素的占比为1 */
  }
</style>

<div class="container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
  <div class="item">元素3</div>
</div>

在上面的代码中，我们将容器的display属性设置为flex，使其成为一个flex容器。然后，通过设置flex-direction属性为row，使子元素在水平方向上排列。接着，使用justify-content属性设置为space-between，实现元素的平均分配。

总结起来，通过设置flex容器的属性并且给子元素设置相同的flex属性值，我们可以实现flex布局中的元素的平均分配。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [CSS布局flex布局 对齐 等分 均分 详解](https://blog.csdn.net/qq_42221334/article/details/89466631)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [css3 flex布局实现平均分配元素的示例代码](https://download.csdn.net/download/weixin_38638163/13127964)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]