CSS设置两种不同尺寸子项的flex网格无法正常换行问题求助

问题根因 #

• 语法错误：你写的.box1、.box2样式中，max-width属性后面缺少冒号，导致该规则完全不生效
• 布局逻辑问题：仅给子项设置flex: 1没有指定最小宽度，空内容的flex子项会无限收缩适配行宽，永远不会触发行宽度不足的换行逻辑

修复后代码 #

CSS #

.container {
  background: red;
  min-height: 400px; /* 替换固定高度为最小高度，避免子项过多时溢出容器 */
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}

.box1 {
   background: green;
   height: 20px;
   max-width: 30px; /* 补全属性冒号 */
   flex: 1;
   min-width: 24px; /* 增加最小宽度阈值，小于max-width即可，触发换行逻辑 */
   margin: 3px;
}

.box2 {
   background: pink;
   height: 20px;
   max-width: 50px; /* 补全属性冒号 */
   flex: 1;
   min-width: 44px; /* 增加最小宽度阈值，小于max-width即可 */
   margin: 3px;
}

HTML #

你的原有HTML代码无需修改即可适配。

效果验证 #

修复后的布局完全符合你的需求：

• 子项的margin始终保持3px固定
• 行剩余空间充足时，子项会自动拉伸填充，直到达到自身的max-width上限
• 当行剩余宽度放不下下一个子项的min-width时，自动触发换行
• 两种尺寸的盒子会自动适配行空间，和你给出的示意图效果一致

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