设置flex-direction: column后flex容器内子div元素消失问题求助

问题根因 #

flex布局中flex属性控制的是主轴方向的伸缩规则，你的问题本质是主轴切换后容器高度和子元素尺寸规则冲突导致的：

• 默认flex-direction: row时主轴是水平方向：flex:1/flex:2控制的是宽度分配，此时你给子元素设置了固定height:200px，容器虽然没设高度但会被子元素高度撑开，所以可以正常显示。
• 改成flex-direction: column后主轴切换为垂直方向：
  1. flex属性的作用对象从宽度变成了高度，flex:1的简写会把flex-basis设为0，优先级高于你写的height:200px，相当于子元素的高度基准被重置为0
  2. 你没有给#container设置固定高度，块元素默认高度由内容撑开，而子元素高度基准是0，最终容器和子元素的高度都变成0，自然就看不到了。

解决方案 #

根据你的需求二选一即可：

方案1：需要子元素按比例分配垂直高度 #

给flex容器添加固定高度即可，比如你要占满整个视口高度就设height: 100vh，要固定总高度就设对应数值：

#container{
  display: flex;
  width: 100%;
  flex-direction: column;
  height: 600px; /* 新增，给容器一个明确的总高度 */
}

修改后三个子元素会按照2:1:1的比例分配600px高度，正常显示。

方案2：不需要垂直比例，保持每个子元素固定200px高度 #

删除子元素的flex属性即可，让你设置的height:200px生效：

.child{
  height: 200px;
  width: 100%; /* 横向占满容器，可选 */
  /* 删掉flex:1规则 */
}
#child_1{
  background-color: red;
  /* 删掉flex:2规则 */
}

修改后三个子元素会各自保持200px高度，垂直堆叠显示。

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