如何在Flex容器中实现每行两元素且各Div自适应内容宽度？

方案一：Flex 布局调整 #

修改原有CSS，移除固定宽度设置，通过flex属性控制项目缩放行为，同时保证每行最多容纳两个项目：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 可选：添加项目间距，优化视觉效果 */
}

.item {
  border: 1px solid black;
  box-sizing: border-box;
  flex: 0 1 calc(50% - 4px); /* 禁止放大、允许收缩，基础宽度为容器一半减去间距的一半 */
  min-width: min-content; /* 确保宽度不小于内容最小宽度，避免内容挤压 */
}

关键属性说明 #

• flex: 0 1 calc(50% - 4px)：0阻止项目被强制拉伸，1允许项目在空间不足时收缩，calc计算值保证每行最多放下两个项目；
• min-width: min-content：锁定项目最小宽度为内容所需的最小尺寸，防止内容被截断或挤压；
• gap：替代传统margin实现项目间距，布局更整洁且无需处理外边距重叠问题。

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

Grid布局对行列控制的支持更直观，代码更简洁：

.container {
  display: grid;
  grid-template-columns: repeat(2, max-content); /* 每行固定2列，列宽由内容决定 */
  gap: 8px; /* 可选：添加项目间距 */
}

.item {
  border: 1px solid black;
  box-sizing: border-box;
}

关键属性说明 #

• grid-template-columns: repeat(2, max-content)：直接指定每行2列，每列宽度自动适配该列中最宽的内容，完美匹配你需要的“内容自适应宽度+每行两列”需求；
• 动态生成的项目会自动按顺序填充行列，最后一行若只有单个项目，会自动靠左排列，完全适配动态列表场景。

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