如何不使用flex grow/shrink实现Flex项目整体换行并适配容器

能否在不使用flex-grow/flex-shrink的前提下使用flex-wrap，同时让容器在项目换行后自动收缩适配内容？我想要实现的效果是：当内容超出容器宽度时，所有项目整体换行（不是逐个项目依次换行），且换行后容器能完全适配内容宽度。目前我已经有JavaScript的解决方案，但更希望只用CSS来实现。之前尝试过flex-grow、flex-shrink和flex-basis，但没法实现整体换行的效果；用flex-wrap时，换行后的项目前面会出现多余空格。

以下两种纯CSS方案都能满足你的需求，无需依赖JavaScript或flex-grow/flex-shrink：

方式一：Flex布局方案 #

核心思路是用inline-flex让容器宽度由内容决定，配合容器查询实现“一行放不下则全部换行”的逻辑，同时用gap消除项目间的空格问题：

/* 父容器：模拟内容超出的场景，可根据实际需求调整宽度 */
.parent {
  max-width: 300px;
  border: 1px solid #eee;
}

/* Flex容器：默认以内容宽度为准，不强制换行 */
.flex-container {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 12px; /* 替代项目间的空白字符，彻底解决换行后空格问题 */
}

/* Flex项目：固定尺寸，禁用缩放 */
.item {
  flex: 0 0 auto;
  padding: 8px 16px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

/* 容器查询：当Flex容器的固有宽度超过父容器时，切换为每行一个项目 */
@container (max-width: 100%) {
  .flex-container {
    flex-wrap: wrap;
    width: 100%;
  }
  .item {
    flex-basis: 100%;
  }
}

• 父容器宽度足够时，所有项目横向排列，容器宽度适配一行内容
• 父容器宽度不足时，所有项目自动切换为纵向排列，容器宽度撑满父容器并适配单个项目的宽度

方式二：Grid布局方案（更简洁） #

Grid布局天生适配这种“要么一行全装下，要么每行一个”的场景，代码更简洁：

.parent {
  max-width: 300px;
  border: 1px solid #eee;
}

.grid-container {
  display: grid;
  /* 自动适配逻辑：空间足够则一行排列，不足则每行一个 */
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  gap: 12px;
  width: fit-content;
  max-width: 100%;
}

.item {
  padding: 8px 16px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

无需额外查询逻辑，repeat(auto-fit, minmax(min-content, 1fr))会自动判断：

• 当父容器宽度能放下所有项目时，所有项目在一行排列，容器宽度适配内容
• 当宽度不足时，每个项目自动占满一行，容器宽度收缩到单个项目的宽度

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