css3中如何使flex布局justify-content:space-between最后一行左对齐

CSS3中使用flex布局的时候，我们经常会用到justify-content属性。它用于设置flex元素在主轴上的对齐方式，有以下几种值：

1. flex-start（默认值）：从主轴起始位置开始排列元素。

2. flex-end：从主轴末尾位置开始排列元素。

3. center：在主轴上居中排列元素。

4. space-between：将元素沿主轴平均分布，相邻元素之间的间距相等。

5. space-around：将元素沿主轴平均分布，元素之间和元素与容器之间的间距相等。

在使用justify-content:space-between时，元素将会沿主轴平均分布，在相邻的元素之间的间距相等。但是在最后一行，如果元素数量不足以填满容器，那么最后一个元素可能会与容器的边缘对齐，给人一种不对称的感觉。为了解决这个问题，我们可以采用以下两种方法：

方法一：使用伪类

我们可以使用伪类选择器来应用特定的样式到最后一行的元素。

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

.container::after {
  content: '';
  flex: auto;
}

.item:last-child:not(:nth-last-child(-n + 2)) {
  flex-basis: auto;
}

上述代码中，我们使用了flex-wrap属性将元素放置在多个行中，然后使用伪类选择器::after将一个自适应的元素添加到最后一行，以填充它与容器边缘之间的空白。此时，最后一行的元素数量可能不足以填满容器，导致布局不对称。因此我们需要给非最后两个元素（:not(:nth-last-child(-n + 2))）在主轴方向上分配与其他元素相同的空间，使用flex-basis:auto即可。

方法二：使用margin-right

我们还可以使用margin-right属性将元素之间的间距应用到它们的右侧，并在最后一个元素的右侧设置零边距。

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

.item {
  margin-right: /* 元素之间的间距 */;
}

.item:last-child {
  margin-right: 0;
}

上述代码中，我们通过设置元素之间的margin-right属性来为它们之间留出间距，在最后一个元素右侧设置零边距，以使最后一行的元素左对齐，并且给人一种对称感。

无论使用哪种方法，当元素数量不足以填满容器时，我们都可以通过应用特定的样式来保持布局的对称性，从而使flex布局更加美观和实用。