移动端Flexbox列布局折叠失效问题求助

我看了你的代码，问题出在Flex容器默认的水平排列规则上——你只给列设置了宽度，但没调整容器的布局方向，导致哪怕屏幕变小，子元素还是会被强制放在同一行。

为什么之前的代码无效？ #

Flexbox容器默认是flex-direction: row，这个属性会让所有子元素始终在水平方向排列，哪怕你给子元素设了width:100%，容器也会自动压缩子元素的宽度来适应行布局，所以它们不会自动堆叠。

两种可行的解决方案： #

方案1：修改容器的flex-direction（最直观）

在移动端的媒体查询里，把容器的布局方向改成垂直的column，这样子元素就会自动占满宽度并堆叠：

/* 容器样式 */
.flexbox-container { 
  display: -ms-flex; 
  display: -webkit-flex; 
  display: flex; 
}

/* 列的基础样式（移动端默认占满宽度） */
.flexbox-column { 
  display: flex; 
  width: 100%; 
  padding: 50px; 
  background-color: yellow; 
} 

/* 屏幕≥768px时，切换成两列布局 */
@media (min-width: 768px) { 
  .flexbox-column { 
    width: 50%; 
    background-color: #444; 
  } 
}

/* 关键：移动端让容器垂直排列 */
@media (max-width: 767px) {
  .flexbox-container {
    flex-direction: column;
  }
}

方案2：给容器开启flex-wrap（更灵活）

如果想保留容器的row方向，可以给容器加上flex-wrap: wrap，然后用flex-basis来控制列的宽度（比直接用width更符合Flexbox的设计）：

.flexbox-container { 
  display: -ms-flex; 
  display: -webkit-flex; 
  display: flex; 
  flex-wrap: wrap; /* 允许子元素换行 */
}

.flexbox-column { 
  display: flex; 
  flex-basis: 100%; /* 移动端占满整行 */
  padding: 50px; 
  background-color: yellow; 
} 

@media (min-width: 768px) { 
  .flexbox-column { 
    flex-basis: 50%; /* 桌面端占一半宽度 */
    background-color: #444; 
  } 
}

两种方案都能解决你的问题，选哪个看你后续的布局需求——方案1更直接，方案2适合需要在不同断点灵活调整列数的场景。

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