flex-flow: column wrap不生效求助，flex row wrap可正常运行

嘿，我太懂这个坑了！你遇到的问题其实是flex垂直方向换行的核心逻辑没摸透——咱们一步步来拆解：

问题根源 #

当使用flex-direction: column + flex-wrap: wrap（或简写flex-flow: column wrap）时，flex容器的换行触发条件和row wrap完全相反：

• row wrap是子元素总宽度超过容器宽度时换行；
• column wrap是子元素总高度超过容器高度时才会换行！

而你当前的代码里，子元素<div>是空的，又没有设置高度，它们的实际高度是0（加上父元素font-size:0，连默认行高都没了），总高度0远小于容器的500px，自然不会触发换行效果。另外你给子元素设置的width: 33.33%是生效的，但因为没换行，所有子元素都挤在第一列里，高度为0所以看不到实际效果。

修正方案 #

只需要给子元素添加高度，让总高度超过容器的500px就行，这里给你两种常见的实现方式：

方式1：让子元素高度占满容器，强制分成多列 #

如果想让3个子元素刚好排成3列，每列宽度是容器的1/3，给子元素设置height: 100%：

* { font-size: 0px; margin: 0; padding: 0; }
.wrap { 
  display: flex; 
  flex-flow: column wrap; 
  width: 90%; 
  height: 500px; 
  margin: 3% auto; 
  padding: 0; 
  background-color: #eee; /* 给容器加浅背景，方便观察范围 */
}
.wrap div { 
  color: yellow; 
  width: 33.333333333333%; 
  height: 100%; /* 关键：让每个子元素高度占满容器 */
}
.wrap div:first-child { background-color: blue; }
.wrap div:nth-child(2) { background-color: blueviolet; }
.wrap div:last-child { background-color: crimson; }

此时3个子元素的总高度是3*500px=1500px，远超容器高度，就会自动换行成3列，每列宽度是容器的1/3，完美呈现列排列效果。

方式2：设置固定高度，直观看到换行逻辑 #

如果想观察逐步换行的过程，可以给子元素设置固定高度，比如height: 200px：

.wrap div { 
  color: yellow; 
  width: 33.333333333333%; 
  height: 200px; /* 固定高度，总高度600px>500px */
}

这时容器第一列会放下前两个子元素（200+200=400<500），第三个子元素因为加上后总高度超过容器限制，就会换行到右侧第二列，能清晰看到column wrap的工作逻辑。

额外提示 #

• 给容器加个浅背景色，能更直观地观察容器范围和子元素的排列位置；
• 如果子元素有实际内容，也可以通过内容撑起高度，不需要硬写height，但空元素必须显式设置高度哦！

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