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

可以通过以下方式实现：

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: space-between;
}

.box {
  width: 30%;
  margin-bottom: 10px;
}

这里设置了每个 `.box` 元素的宽度为30%，并设置了下边距为10px，这样每行最多可以放3个元素，并且每个元素之间会有空白的间隔。如果最后一行元素不足3个，剩余的元素会按照顺序依次排列。

相关问题

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，这样最后一行的元素会从左到右依次排列。

如何让三个div盒子按照左中右的顺序水平对准的代码

可以使用 flexbox 布局来实现三个 div 盒子按照左中右的顺序水平对齐。以下是一个简单的实现示例：

HTML 代码：

<div class="container">
  <div class="box-left">左边的内容</div>
  <div class="box-center">中间的内容</div>
  <div class="box-right">右边的内容</div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-left {
  flex: 1;
  text-align: left;
}

.box-center {
  flex: 1;
  text-align: center;
}

.box-right {
  flex: 1;
  text-align: right;
}

上面的代码中，通过将容器设置为 flex 布局，并使用 justify-content 和 align-items 属性来水平对齐和垂直对齐三个盒子。通过将三个盒子的 flex 属性设置为 1，使它们平均分配容器的宽度。同时设置每个盒子的 text-align 属性来使其内部内容左对齐、居中和右对齐。