css flex 布局 每行放三个div

使用CSS flex布局可以实现每行放置三个div的效果。可以参考下面的代码示例：

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: calc(33.33% - 10px);
  height: 100px;
  margin: 5px;
}
</style>

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

在上述代码中，我们使用了flex布局，并将容器的flex-wrap属性设置为wrap，这样可以让子元素在一行放不下时自动换行。每个子元素的宽度设置为calc(33.33% - 10px)，这样可以保证每行放置三个div，并且有一定的间距。通过调整容器和子元素的样式，可以实现不同的布局效果。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* [css布局和定位](https://blog.csdn.net/qq_33302253/article/details/129379353)[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^v92^chatsearchT3_1"}} ] [.reference_item]
- *2* [css样式布局](https://blog.csdn.net/qq_46239275/article/details/121624615)[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^v92^chatsearchT3_1"}} ] [.reference_item]
- *3* [flex布局](https://blog.csdn.net/weixin_50903927/article/details/121673086)[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^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]