无需断点和JS如何让成对div可并排时并列，放不下自动块级堆叠？

有纯CSS实现方案，不需要媒体查询也不需要JS，核心利用Flexbox的自动换行特性配合子元素最小宽度限制实现自适应切换。

实现代码 #

修改后的CSS如下：

.pair {
  display: flex;
  flex-wrap: wrap; /* 新增：空间不足时允许子元素换行 */
}
.pair > div {
  margin: 0 5px;
  flex: 1; /* 新增：有剩余空间时自动占满可用宽度，换行后撑满整行 */
  min-width: fit-content; /* 新增：限制子元素最小宽度为自身内容宽度，避免被压缩 */
}

原有HTML代码无需修改即可生效。

实现原理 #

• 原代码的Flex布局默认是flex-wrap: nowrap，无论容器多窄都会强制子元素挤在同一行，新增flex-wrap: wrap后就会在子元素总宽度超过容器宽度时自动换行。
• min-width: fit-content保证子元素不会被压缩到内容溢出，当容器宽度小于两个子元素的内容总宽度时，就会自动触发换行。
• flex: 1会让子元素在有剩余空间时自动填充可用宽度，并排时按比例分配容器宽度，换行后自动占满整行，实现上下堆叠效果。

如果不需要堆叠时子元素占满整行，只需要保持自身内容宽度，把flex: 1替换为flex: 0 0 auto即可。如果需要兼容旧版浏览器，min-width: fit-content也可以替换为固定最小宽度（比如min-width: 200px，根据实际内容调整数值）。

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