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

css flex布局详细

CSS Flex布局是一种强大的布局技术，它可以让你更方便地控制元素在容器中的位置、大小和间距。Flex布局主要通过以下三个部分来实现：

1. Flex容器（Flex Container）：使用display: flex属性声明一个元素为Flex容器，该容器中的所有子元素将成为Flex项目。

2. Flex项目（Flex Item）：Flex容器中的每个子元素都是Flex项目，Flex项目可以通过Flex容器的属性来控制其位置、大小和间距。

3. Flex轴（Flex Axis）：Flex容器默认有两个轴，一个是主轴（Main Axis），一个是交叉轴（Cross Axis）。主轴是Flex项目的排列方向，交叉轴则是垂直于主轴的方向。Flex项目可以在主轴和交叉轴上进行对齐。

下面是Flex布局的一些常用属性：

1. flex-direction：设置Flex容器的主轴方向，可以选择row（水平方向）、column（垂直方向）、row-reverse（水平方向反转）和column-reverse（垂直方向反转）。

2. justify-content：定义Flex项目在主轴上的对齐方式，可以选择flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目两侧的间隔相等）和space-evenly（每个项目两侧和项目之间的间隔都相等）。

3. align-items：定义Flex项目在交叉轴上的对齐方式，可以选择flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、baseline（基线对齐）和stretch（拉伸对齐，项目高度会被拉伸至与容器相同）。

4. flex-wrap：定义Flex项目是否在一行上排列，可以选择nowrap（不换行）、wrap（换行，第一行在上方）和wrap-reverse（换行，第一行在下方）。

5. align-content：当Flex项目在多行或多列上排列时，定义它们在交叉轴上的对齐方式，可以选择flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、space-between（两端对齐，每行之间的间隔相等）、space-around（每行之间和容器两侧的间隔相等）和stretch（拉伸对齐，每行高度会被拉伸至与容器相同）。

6. order：定义Flex项目的排列顺序，数值越小越靠前，默认为0。

7. flex-grow：定义Flex项目在剩余空间中所占比例，数值越大占比越大，默认为0。

8. flex-shrink：定义Flex项目在空间不足时所占比例，数值越大缩小比例越大，默认为1。

9. flex-basis：定义Flex项目在主轴上的初始大小，默认为auto。

以上是Flex布局的一些基本属性，可以让你更好地掌握Flex布局的原理和使用方法。