Flexbox设置justify-content:center时末行元素无法左对齐问题

我当前遇到的问题是：justify-content:center属性作用下，当Flex容器内子元素总宽度小于容器宽度时，子元素无法从左开始对齐排列。

现有代码 #

CSS 代码 #

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
  border:1px solid black;
  width:60%;
  justify-content:center;
}
.flex-item-blue {
  background-color: blue;
  padding: 10px;
}
.flex-item-grey {
  background-color: grey;
  padding: 10px;
}

HTML 代码 #

<div class="flex-container">
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
  <div class="flex-item-blue">1</div>
  <div class="flex-item-grey">2</div>
</div>

原代码中设置justify-content: center后，Flex容器会把每一行的子元素作为整体居中对齐，当最后一行子元素总宽度小于容器宽度时，整行都会居中，无法实现左对齐效果。

方案1：使用CSS Grid实现（推荐） #

替换为Grid布局可以更简单实现需求，无需额外添加冗余元素，现代浏览器均兼容：

.flex-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, auto));
  justify-content: center;
  font-size: 30px;
  text-align: center;
  border:1px solid black;
  width:60%;
}
/* 子元素样式无需修改 */

方案2：Flex布局添加占位伪元素 #

如果需要保留Flex布局兼容旧版浏览器，可以给容器添加伪元素占位，撑满最后一行剩余空间：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
  border:1px solid black;
  width:60%;
  justify-content:center;
}
/* 添加占位伪元素 */
.flex-container::after {
  content: "";
  flex: auto;
}
/* 其余样式无需修改 */

内容的提问来源于stack exchange，提问作者Stacie T.