如何实现Flex子项左对齐且整体在父容器居中？含Grid方案问询

需求：一组方块内部子项左对齐，整个方块组在父div中居中；子项可换行、间距固定，不使用分散对齐。

Flex 解决方案 #

你的原有Flex代码问题在于内层.container-squares默认占满外层容器宽度，导致外层的居中设置无法体现。只需给内层容器添加width: fit-content，让它的宽度适配内部子项的总宽度，即可实现预期效果：

.container {
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  border: 5px solid black;
}
.container-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: start; 
  border: 5px solid gold;
  width: fit-content; /* 核心：让容器宽度匹配内容 */
}
.item {
  width: 150px;
  height: 150px;
  background-color: tomato;
  border: 1px solid black;
}

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

Grid 解决方案 #

原有Grid代码的问题是容器强制占满父宽度，且固定列数均分宽度，导致子项无法保持左对齐的整体居中。调整为让Grid容器适配内容宽度，同时用auto-fill实现自动换行的固定列布局：

.container-grid {
  width: 80%;
  margin: 0 auto;
  border: 5px solid black;
  display: flex;
  justify-content: center; /* 让内部Grid容器居中 */
}
.container-squares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px); /* 自动填充150px宽的列 */
  gap: 10px;
  border: 5px solid gold;
}
.item-grid {
  height: 150px; /* 列宽由grid控制，无需单独设置width */
  background-color: teal;
  border: 1px solid black;
}

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

关键说明 #

• Flex方案中width: fit-content让内层容器仅占据子项排列所需的最大宽度，外层flex的居中设置就能让整个方块组在父容器内居中，子项换行时仍保持左对齐、间距固定。
• Grid方案中repeat(auto-fill, 150px)会根据容器宽度自动生成尽可能多的固定宽度列，配合外层flex居中，完美满足需求，无需手动指定列数。

内容的提问来源于stack exchange，提问作者marielle