如何让水平排列的盒子随屏幕宽度自动垂直堆叠？

要实现盒子在容器内自动垂直堆叠且不溢出，同时满足宽度变化时的排列需求，可通过以下两种方式实现：

方式一：普通自动换行（从上到下、从左到右） #

这是最常用的方案，当容器宽度不足时，盒子会自动换行到下一行，最小宽度时变为单列。只需给外层容器添加flex-wrap: wrap，并优化内层盒子的弹性属性：

.outer {
  display: flex;
  flex-wrap: wrap; /* 允许盒子换行 */
  max-width: 1000px;
  border: 1px solid black;
}

.inner {
  min-width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
  color: white;
  flex: 1 1 100px; /* 让盒子可伸缩，空间充足时均匀分布，不足时收缩到最小宽度 */
}

HTML结构保持不变：

<div class='outer'>
  <div class='inner'>1</div>
  <div class='inner'>2</div>
  <div class='inner'>3</div>
  <div class='inner'>4</div>
  <div class='inner'>5</div>
  <div class='inner'>6</div>
  <div class='inner'>7</div>
</div>

方式二：反向换行（从上到下、从右到左，满足7在1下方的需求） #

如果需要实现宽度缩小时，最后一个盒子优先换行到第一行下方（如7在1下方、6在2下方），可使用CSS Grid结合文字方向属性实现：

.outer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 120px = 盒子最小宽度 + 左右margin */
  max-width: 1000px;
  border: 1px solid black;
  direction: rtl; /* 设置容器内元素从右往左排列 */
}

.inner {
  min-width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
  color: white;
  direction: ltr; /* 恢复盒子内文字的正常方向 */
}

关键说明： #

• flex-wrap: wrap是解决flex容器溢出的核心属性，默认flex容器不换行，会强制压缩盒子或溢出容器。
• flex: 1 1 100px让盒子在有多余空间时自动扩展，空间不足时收缩到min-width的100px，保证布局灵活适配不同宽度。
• Grid方案中的repeat(auto-fit, minmax(120px, 1fr))会自动根据容器宽度调整列数，direction: rtl实现每行元素从右往左排列，从而让最后一个盒子出现在第一行第一个盒子的下方。

内容的提问来源于stack exchange，提问作者one-hand-octopus