css flex布局 每排三个，不论多少个都是从左往右排

可以通过设置 `flex-wrap: wrap;` 和 `justify-content: flex-start;` 属性来实现每排三个，不论多少个都是从左往右排的布局。具体代码如下：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.item {
  flex: 0 0 calc(33.33% - 10px);
  margin: 5px;
}

以上代码中，`.container` 是容器元素，`.item` 是每个子元素。`flex-wrap: wrap;` 属性表示子元素超出容器宽度时自动换行，`justify-content: flex-start;` 属性表示子元素从左往右排列。`.item` 的 `flex` 属性设置为 `0 0 calc(33.33% - 10px)` 表示每个子元素占据容器的三分之一宽度，并且不允许子元素自动缩小或放大，同时减去 `margin` 的宽度（这里设置为 `5px`）以保证子元素之间的间距。

相关问题

flex布局space-between 每排3个 不足三个从左到右按顺序排

要实现每排最多显示3个元素，不足三个从左到右按顺序排，可以先将 `.container` 元素的 `justify-content` 属性设置为 `flex-start`，这样所有的元素都会靠左排列。然后通过设置 `.box` 元素的 `flex` 属性来控制剩余的空间，使得最后一行的元素依次排列。最后，使用伪类 `:nth-child()` 来设置第1、4、7个元素的右边距为10px，这样每一排的元素之间保持等距。

HTML结构：

<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>

CSS样式：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.box {
  width: 30%;
  margin-bottom: 10px;
  flex: 1 0 auto;
}

.box:nth-child(3n+1) {
  margin-right: 10px;
}

.box:last-child:nth-child(n+4) {
  margin-right: auto;
}

.box:last-child:nth-child(-n+3) {
  margin-right: 10px;
}

这里同样设置了每个 `.box` 元素的宽度为30%以及下边距为10px，但是使用了 `flex: 1 0 auto;` 属性来控制剩余的空间，这样最后一行的元素会依次排列。同时，使用伪类 `:nth-child()` 来设置第1、4、7个元素的右边距为10px，同时设置最后一行的元素的右边距为自动或者10px，这样最后一行的元素会从左到右依次排列。

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 ]