为何flex-flow: column wrap未按预期实现布局效果？

核心问题 #

你在平板端媒体查询里犯了两个关键错误：

1. 你说想使用flex-flow: column wrap，但实际写的是flex-flow: row wrap，布局方向完全不符合预期
2. 给main设置了height: 10000px这个极大的固定高度——当使用row wrap时，第一列的Section One会占据左侧几乎全部高度，Section Two在右侧列，后续的Section Three只能从左侧列Section One的底部开始排列，这就导致了Section Two下方出现大片空白。

修复方案 #

根据你的预期（Section Three在Section Two下方、Section Four在Section Three下方，即按顺序从上到下、从左到右的两列布局），调整代码如下：

方案1：水平换行的两列布局（符合你的预期排列顺序）

移除容器的固定高度，保持row wrap并明确控制每个section的宽度占比：

@media screen and (min-width: 768px) {
  main {
    flex-flow: row wrap;
    /* 删掉height: 10000px，让容器高度由内容自动撑开 */
  }
  section {
    flex: 0 0 50%; /* 明确设置宽度为50%，避免flex-grow导致的拉伸问题 */
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

方案2：垂直换行的两列布局（若你确实想使用column wrap）

如果要实现左侧列从上到下排满后，右侧列继续排列的效果，需要给容器设置合适的高度而非宽度：

@media screen and (min-width: 768px) {
  main {
    flex-flow: column wrap;
    height: 100vh; /* 设置合适的高度，让元素垂直排满后换行 */
    width: 100%;
  }
  section {
    width: 50%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

总结 #

• 先明确布局方向：水平换行用row wrap，垂直换行用column wrap
• 避免给flex容器设置不必要的极大固定高度，否则会打乱元素的自然排列顺序
• 用flex: 0 0 50%控制宽度比单纯的flex:50%更稳定，防止元素被意外拉伸

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