如何让可换行Flex容器收缩包裹内容并实现居中？

直接上可行方案，核心是让容器自适应换行后的宽度，再实现居中：

方法一：width: fit-content + 父容器Flex居中 #

适合需要水平+垂直居中的场景，兼容性覆盖绝大多数现代浏览器：

/* 给父容器（比如body）设置布局，实现子容器的居中 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px dashed magenta;
  width: fit-content; /* 关键：让容器收缩到换行后的实际宽度 */
}

.container div {
  width: 100px;
  /* 高度可留空自动适配内容；需要固定高度则保留height:60px */
  border: 1px solid black;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

方法二：inline-flex + 父容器文本居中 #

如果只需要水平居中，这种方式更简洁：

body {
  text-align: center;
}

.container {
  display: inline-flex; /* 行内Flex容器自动收缩包裹内容 */
  flex-wrap: wrap;
  border: 1px dashed magenta;
}

.container div {
  width: 100px;
  height: 60px;
  border: 1px solid black;
}

为什么之前的尝试没生效？ #

• width: min-content/max-content：min-content会取子元素最小宽度（这里是100px），导致容器强制单列；max-content会禁止换行，容器宽度撑满所有子元素总宽度，不符合换行需求。
• inline-flex单独使用：仅设置inline-flex确实能让容器收缩，但如果没给父容器加text-align: center，容器会默认左对齐，你之前可能漏了这一步。

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