无媒体查询的响应式双盒子布局实现方案问询

嘿，刚好有个完美的Flexbox方案能精准满足你的需求，完全不用写媒体查询！先上完整代码，再给你拆解关键逻辑：

<div class="container">
  <div class="box box-1">Box 1 (min-width: 400px)</div>
  <div class="box box-2">Box 2 (min-width: 200px)</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 60px; /* 盒子间固定间距 */
  padding: 20px; /* 可选，给容器加内边距优化视觉 */
}

.box {
  padding: 20px;
  border: 2px solid #333;
  border-radius: 8px;
}

.box-1 {
  flex: 1 1 400px; /* flex-grow:1, flex-shrink:1, flex-basis:400px */
}

.box-2 {
  flex: 1 1 200px; /* flex-grow:1, flex-shrink:1, flex-basis:200px */
}

关键逻辑拆解： #

• 容器核心设置

  • display: flex 开启Flex布局模式
  • flex-wrap: wrap 是自动换行的关键：当容器宽度不足以容纳两个盒子+60px gap时，第二个盒子会自动换行
  • gap: 60px 直接实现盒子间的固定间距，不用额外处理margin的兼容性问题

• 盒子的Flex属性

  • flex: 1 1 [min-width] 是方案的核心：
    • flex-grow: 1：当容器宽度超过400px + 200px + 60px = 660px时，两个盒子会按等比例分配多余空间（因为grow值都是1），实现“按比例扩展”的需求
    • flex-basis: 400px/200px：相当于给盒子设置了最小宽度基准——当容器能放下两个盒子+gap时，盒子以此为基础扩展；当容器宽度不够时，触发换行
    • flex-shrink: 1：这里也可以设为0（flex: 1 0 [min-width]），效果完全一致，因为空间不足时我们是通过换行而非收缩盒子来适配，所以shrink的值不影响最终表现

• 自动适配的临界点

  • 容器宽度＞660px：两个盒子并排，各按比例扩展（比如容器宽760px，多余的100px会被平分，盒子1变成450px，盒子2变成250px）
  • 容器宽度≤660px：第二个盒子自动换行，两个盒子都占满容器的100%宽度（flex-grow:1会让它们撑满可用空间）

这个方案完全贴合你的所有需求，代码简洁无冗余，我之前做项目时用这个方法解决过类似的响应式布局问题，亲测稳定好用～

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