CSS Flexbox移动端不堆叠问题求助：元素挤压而非换行

核心问题分析 #

你的代码里有两个关键问题导致移动端子元素挤压：

• .container 设置了固定 width: 650px，手机屏幕宽度不足时，容器不会自适应收缩，反而超出屏幕范围，迫使内部Flex子元素挤压缩小。
• 媒体查询里只调整了容器的外边距，没针对 .row 和 .col 做Flex布局的适配，.col 的 flex:1 默认会让元素自动收缩，无法触发堆叠。

修改后的CSS代码 #

body {
  margin: 0;
  display: flex;
  justify-content: flex-end;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  /* 把固定width改成max-width，实现大屏固定宽度，小屏自适应 */
  max-width: 650px;
  width: 100%;
  padding: 0.5em;
  z-index: 999;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
}

.col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5em;
  border: 1px solid #000;
  /* 可选：给子元素设置最小宽度，确保空间不足时自动换行 */
  min-width: 200px;
}

.col-mid {
  display: flex;
  flex: 2;
  flex-direction: column;
  gap: 0.5em;
}

.col-big {
  display: flex;
  flex: 3;
  flex-direction: column;
  gap: 0.5em;
}

@media only screen and (max-width: 625px) {
  body {
    margin: 0;
    /* 小屏幕下让body的内容居中，避免容器靠右 */
    justify-content: center;
  }

  .container {
    margin: 0 auto;
    /* 小屏幕下容器占满宽度 */
    width: calc(100% - 1em);
  }

  /* 强制.row的子元素垂直堆叠 */
  .row {
    flex-direction: column;
  }

  /* 或者如果想保留wrap效果，也可以给.col设置min-width:100%，替代上面的flex-direction:column */
  /* .col {
    min-width: 100%;
  } */
}

关键修改说明 #

1. 容器自适应宽度：把 .container 的 width:650px 改成 max-width:650px + width:100%，这样大屏时容器保持650px宽度，小屏幕自动占满可用空间。
2. 媒体查询适配布局：在移动端媒体查询里给 .row 设置 flex-direction:column，直接强制子元素垂直堆叠；或者给 .col 设置 min-width:100%，触发 flex-wrap:wrap 让每个元素占满一行。
3. 修复body布局：小屏幕下调整body的 justify-content:center，避免容器靠右显示，提升移动端体验。

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