解决flex布局使用justify-content:center最后一行元素数量不足会居中问题

这个问题通常发生在使用Flexbox布局时，特别是在多行布局的情况下，当最后一行的元素数量不足以充满容器宽度时，justify-content: center 可能会导致这一行的元素并不居中，而是靠左对齐。

为了解决这个问题，可以采用以下几种策略：

1. 使用 justify-content: space-around 或 justify-content: space-between 替换 justify-content: center，这样可以在两端填充空白空间，从而使最后一行的元素看起来是居中的。
2. 使用额外的元素（例如用作占位的空div）来推动最后一行到中间。这需要在最后一行元素的外面添加额外的Flex项，使得所有行都看起来是居中对齐的。
3. 使用 margin 自定义间距，通过为Flex项目设置合适的外边距，可以手动调整间距，使得最后一行看起来是居中的。

以下是使用第二种策略的示例代码：

<div style="display: flex; flex-wrap: wrap; justify-content: center;">
  <div style="flex: 1 0 auto;">Item 1</div>
  <div style="flex: 1 0 auto;">Item 2</div>
  <div style="flex: 1 0 auto;">Item 3</div>
  <!-- 添加额外的Flex项来填充空白 -->
  <div style="flex: 1 0 auto; visibility: hidden;"></div>
</div>

在这个例子中，我们添加了一个隐藏的flex项，使得即使最后一行元素数量少于其他行，布局看起来也会是居中对齐的。隐藏的flex项在视觉上是不可见的，但仍然占据空间，从而影响布局。