不足三个按从左到右排序

如果要实现不足三个按从左到右排序，可以将 `.container` 元素的 `justify-content` 属性设置为 `flex-start`，这样所有的元素都会靠左排列。然后通过设置 `.box` 元素的 `flex` 属性来控制剩余的空间，使得最后一行的元素依次排列。

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:nth-child(n+4):nth-child(-n+6) {
  margin-right: auto;
}

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