css平均分配盒子空间

在CSS中，可以使用flex布局来实现平均分配盒子空间。在给父盒子设置display:flex;后，子盒子可以使用flex属性来控制它们在父盒子中的分布。当子盒子设置flex:1;时，它会占据剩余的空间，实现平均分配。\[1\]

例如，在下面的示例代码中，父盒子.container设置了display:flex;，子盒子.box1设置了固定的宽度100px，而子盒子.box2设置了flex:1;。这样，子盒子.box2会占据剩余的空间，实现平均分配盒子空间。

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  display: flex;
  width: 400px;
  height: 200px;
  background-color: aqua;
}

.box1 {
  width: 100px;
  height: 200px;
  background-color: blue;
}

.box2 {
  flex: 1;
  background-color: brown;
}

在这个例子中，子盒子.box2会占据剩余的空间，使得子盒子.box1和子盒子.box2平分父盒子.container的宽度。\[1\]

另外，还可以使用flex布局的justify-content属性来控制子盒子的水平分布方式。例如，可以使用justify-content: space-around;来实现弹性项目的平均分布，并在两边留有一半的间隔空间。\[2\]

.container {
  display: flex;
  justify-content: space-around;
}

在这个例子中，弹性项目会平均分布在父盒子中，并在两边留有一半的间隔空间。如果剩余空间为负或只有一个弹性项，则该值等同于center。\[2\]

总结起来，可以使用flex布局的flex属性和justify-content属性来实现CSS中的盒子空间的平均分配。
#### 引用[.reference_title]
- *1* [CSS技巧：使用flex:1；分配盒子剩余空间](https://blog.csdn.net/m0_52364694/article/details/120193731)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Css3 弹性盒子布局](https://blog.csdn.net/qqlibo205/article/details/103007886)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [css3 flex 布局实现平均分配元素](https://blog.csdn.net/HH18700418030/article/details/103411787)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]