如何居中带有最小与最大宽度限制的Flex容器？

核心需求 #

• 橙色容器在红色父容器中水平居中
• 橙色容器宽度紧贴内部绿色内容元素（包含内边距和元素间距）
• 每个绿色元素固定宽度为100px

修正后的代码 #

CSS 代码 #

.parent {
  display: flex;
  justify-content: center;
  align-items: center;

  /* 可视化样式 */
  height: 10rem;
  width: 90%;
  background: red;
  padding: 1rem;
}

.inline-flexbox {
  display: inline-flex;
  width: fit-content; /* 关键：让容器宽度适配内容 */

  /* 可视化样式 */
  height: 80%;
  padding: 1rem;
  background: orange;
  column-gap: 1rem;
}

.flex-content {
  width: 100px; /* 固定宽度100px */
  min-width: 100px; /* 确保不会缩小 */
  max-width: 100px; /* 确保不会放大 */

  /* 可视化样式 */
  height: 100%;
  background: green;
}

HTML 代码 #

<div class="parent">
  <div class="inline-flexbox">
        <div class="flex-content"></div>
        <div class="flex-content"></div>
  </div>
</div>

关键调整说明 #

1. 移除.inline-flexbox的flex-grow:1：这个属性会让容器撑满父容器的可用空间，和“紧贴内容”的需求冲突。父容器本身的justify-content:center已经能实现橙色容器的居中效果。
2. 添加width: fit-content：让橙色容器的宽度自动适配内部内容的总宽度（包含元素宽度、间距和内边距），完美实现“紧贴内容”的要求。
3. 简化绿色元素的样式：直接用width:100px配合min-width和max-width，确保每个绿色元素始终保持100px宽度，符合需求。

内容的提问来源于stack exchange，提问作者T. J. Evers