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

当使用css3 flex布局时，可以通过设置justify-content: space-between来使得弹性容器中的子元素在弹性容器内均匀分布，并且在容器的两端留下相等的空白间距。但是，当弹性容器的子元素个数无法充满弹性容器时，最后一行的元素会出现左对齐的问题，而不是空白间距均分。

这种情况下，我们可以通过使用 :last-child 选择器来对最后一行的元素进行特殊处理，使其左对齐。具体过程如下：

1.首先，我们需要在弹性容器中插入一个“占位元素”，使得弹性容器中的元素个数能够充满容器。例如：

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-fill"></div>
</div>

在上述代码中，我们通过在 .flex-container 中插入一个 .flex-fill 元素来使得 .flex-item 元素能够填满弹性容器。

2.接下来，我们需要对 .flex-fill 元素进行特殊处理，在最后一行的元素出现时，将 .flex-fill 元素的flex-grow属性设置为0，从而实现对最后一行元素的左对齐。具体实现如下：

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

.flex-fill {
  flex-grow: 1;
}

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

.flex-item:last-child ~ .flex-fill {
  flex-grow: 0;
}

在上述代码中，我们通过设置 .flex-fill 元素的 flex-grow: 1; 属性，使其能够填充弹性容器的空白区域。同时，当最后一行的 .flex-item 元素出现时，我们通过 flex-grow: 0; 属性，将 .flex-fill 元素的大小锁定，从而实现最后一行元素的左对齐。

下面我们通过两个示例来具体说明以上内容：

示例1：显示4个元素，使得最后一行左对齐

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-fill"></div>
</div>

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

.flex-fill {
  flex-grow: 1;
}

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

.flex-item:last-child ~ .flex-fill {
  flex-grow: 0;
}

在上述代码中，我们通过在 .flex-container 中插入一个 .flex-fill 元素，使得4个元素能够充满弹性容器。当4个元素填满容器时，我们通过设置 .flex-fill 元素的大小为0，防止其显示在页面上。

示例2：显示5个元素，使得最后一行左对齐

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-fill"></div>
</div>

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

.flex-fill {
  flex-grow: 1;
}

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

.flex-item:last-child ~ .flex-fill {
  flex-grow: 0;
}

在上述代码中，我们同样通过插入 .flex-fill 元素来使得5个元素能够充满弹性容器。在5个元素填满容器时，我们同样通过设置 .flex-fill 元素的大小为0，防止其显示在页面上。

通过上述示例，我们可以看到，通过插入一个占位元素，并对其进行特殊处理，我们可以实现最后一行元素的左对齐效果。