如何用Flex实现大屏两列小屏单列布局（无需媒体查询）

嘿，我来帮你解决这个Flex布局的问题！你想要的无媒体查询自适应列布局其实可以通过Flex的flex-wrap和子元素的尺寸约束来实现，之前的代码因为固定了容器高度，导致布局没法随宽度调整，我们来改一下：

核心思路 #

不用媒体查询的关键是利用Flex的自动换行特性，通过子元素的min-width触发布局切换，同时让第一个子元素占满容器垂直高度，迫使其他子元素流到新列。

修正后的代码 #

HTML

<div id="container">
  <div class="full-height">第一列（全高）</div>
  <div>第二列项1</div>
  <div>第二列项2</div>
</div>

CSS

#container {
  border: 1px solid #aaa;
  min-height: 300px; /* 保留最小高度，替代固定height */
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-flow: column wrap; /* 垂直排列 + 允许换行 */
  gap: 2px; /* 用gap代替margin，避免外边距折叠问题 */
}

#container > div {
  border: 1px solid #aaa;
  flex: 1 1 auto; /* 允许元素伸缩，自动适配剩余空间 */
  min-width: 200px; /* 宽度阈值：小于两列总宽时自动切换单列 */
}

.full-height {
  flex: 0 0 100%; /* 不伸缩，占满容器垂直高度 */
}

为什么这样可行？ #

• 容器高度处理：把固定height:300px改成min-height:300px，让容器能根据内容和布局自动调整高度，同时保证最小显示尺寸。
• 换行触发：flex-flow: column wrap让元素默认垂直排列，当容器宽度不足以容纳两个min-width:200px的元素时，自动换行到新列。
• 第一列全高：.full-height的flex:0 0 100%让它占满容器整个垂直空间，剩下的两个元素没有垂直空间可用，就会自动流到第二列垂直排列，实现大屏两列效果。
• 小屏自适应：当容器宽度小于200px*2 + 间隙时，无法容纳两列，所有元素自动切换为单列垂直布局。

这样就完全实现了你要的效果，不用写一行媒体查询~

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