CSS布局问题：如何让除最后一行外的所有弹性项居中？

当Flex容器开启flex-wrap: wrap后，使用justify-content: center会让每一行的元素单独居中，而非你需要的「所有元素左对齐排列，整个元素组在容器中水平居中」；而用justify-content: flex-start时，元素会左对齐换行，但整个内容组会贴紧容器左侧，无法实现整体居中。

方法一：嵌套Flex容器 #

通过两层Flex容器实现需求：外层容器负责让内容组整体居中，内层容器负责元素左对齐换行。

/* 外层容器：控制整体居中 */
.flex-wrapper {
  display: flex;
  justify-content: center;
  width: 100%; /* 占满父级宽度，确保居中生效 */
}

/* 内层容器：控制元素左对齐换行 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 800px; /* 根据实际需求设置内容组的最大宽度 */
}

/* 子元素示例样式 */
.flex-item {
  width: 150px;
  height: 150px;
  background-color: #e0e0e0;
  margin: 10px;
}

对应的HTML结构：

<div class="flex-wrapper">
  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</div>

方法二：使用Grid布局 #

Grid布局可以更简洁地实现该效果，无需嵌套容器：

.grid-container {
  display: grid;
  justify-content: center; /* 让整个网格组居中 */
  grid-template-columns: repeat(auto-fill, 150px); /* 自动填充固定宽度的列 */
  gap: 10px; /* 替代子元素的margin，控制间距 */
  width: 100%;
}

.grid-item {
  height: 150px;
  background-color: #e0e0e0;
}

HTML结构：

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

内容的提问来源于stack exchange，提问作者Naleśnior