如何阻止flex-wrap的Flex容器占满空间并实现指定对齐效果

需求与问题 #

要实现的效果：开启flex-wrap的Flex容器中，项数最多的行整体居中，项数较少的行必须和满项行保持相同的起始位置。

之前遇到的问题：直接给容器加justify-content: center，会让少项的行也居中，导致起始位置偏移；嵌套外层flex容器时，内层容器会撑满父容器宽度，达不到预期。

解决方案 #

用两层容器嵌套就能搞定，核心是把内层容器改成inline-flex：

修改后的代码

CSS

/* 外层容器：负责整体居中 */
.wrapper {
  display: flex;
  justify-content: center;
  background: #eee;
}

/* 内层容器：用inline-flex限制宽度 */
.container {
  display: inline-flex;
  flex-wrap: wrap;
  background: orange;
  gap: 0.5rem;
  padding: 1rem;
}

.container > div {
  height: 150px;
  width: 150px;
  background: purple;
}

HTML

<div class="wrapper">
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

原理说明 #

• 外层的flex容器把内层的inline-flex容器整体居中，保证满项行处于页面中间位置。
• 内层用inline-flex后，容器宽度会自动匹配满项行的总宽度（子项宽度+gap+容器padding），不会撑满父容器。这样当行内项数减少时，子项会从这个固定宽度的容器左侧开始排列，自然和满项行的起始位置对齐。

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