如何实现容器内div水平排列且窗口缩小时自动换行

你之前查到的写法缺了控制换行的核心属性，直接给可运行的完整实现：

核心CSS代码 #

给外层容器div添加如下样式：

.flex-container {
  /* 基础flex布局声明 */
  display: flex;
  /* 水平居中排列子项 */
  justify-content: center;
  /* 子项垂直方向居中对齐 */
  align-items: center;
  /* 核心缺失属性：容器宽度不足时子项自动折行，不会硬挤在同一行 */
  flex-wrap: wrap;
  /* 防止容器撑出视口宽度触发横向滚动条 */
  width: 100%;
  box-sizing: border-box;
  /* 可选：统一设置子项之间的间距，避免手动加margin出现边缘多余空隙 */
  gap: 12px;
  /* 可选：小屏下左右留留白，避免子项贴浏览器边缘 */
  padding: 12px 16px;
}

注意事项 #

• 容器内的子div不要设置超过容器宽度的固定min-width，否则即使设置了折行属性也会因为子项最小宽度限制溢出
• 如果不需要折行后子项垂直居中，可以把align-items调整为flex-start，避免行高不一致时出现奇怪的对齐问题
• 不需要额外给子项加浮动、inline-block这类旧布局属性，会打乱flex的渲染逻辑

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