Flexbox未按预期生效 如何使用其实现替代float的双列布局

核心问题原因 #

• Flex容器默认设置为flex-wrap: nowrap不换行，即使子元素设置了flex: 50%，当内容实际宽度超出阈值时会自动压缩，无法稳定保持两列布局。
• 代码中使用的.row类通常是前端栅格系统的自带类，会有默认的负边距、布局规则，可能覆盖自定义的Flex样式优先级。
• 未配置盒模型规则，子元素的padding、border会额外占用宽度，导致实际占用宽度超过50%，无法并排放下两列。
• 容器内的图片未做宽度限制，大尺寸图片会撑爆子容器，破坏布局规则。

修复代码 #

CSS修改 #

/* 全局盒模型统一，避免宽高计算异常 */
* {
  box-sizing: border-box;
}

.threesixty-tours-wrapper {
  display: flex;
  flex-wrap: wrap;
  /* 重置.row类自带的负边距影响，如无冲突可删除下面两行 */
  margin-left: 0;
  margin-right: 0;
  /* 控制列之间的间距，可根据需求调整数值 */
  gap: 20px;
}

.threesixty-tours-container {
  /* 减去gap的一半宽度，保证两列刚好占满一行 */
  flex: 0 0 calc(50% - 10px);
  /* 禁止子元素被压缩 */
  flex-shrink: 0;
}

.threesixty-image {
  /* 限制图片宽度不超过父容器 */
  max-width: 100%;
  height: auto;
  display: block;
}

结构注意事项 #

所有.threesixty-tours-container子容器需要直接放置在.threesixty-tours-wrapper下，不要额外嵌套其他父级容器，避免Flex布局失效。

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