Flex布局下实现子元素垂直居中且child-2位于child-1下方的问题

嘿，我来帮你搞定这个布局需求！先看看你的原始代码，方便我们分析问题：

原始HTML代码 #

<div class="parent"> 
  <header class="child-1"> 
    <h1 class="float-left">lorem...</h1> 
    <div class="float-right">lorem...</div> 
  </header> 
  <div class="child-2">lorem...</div> 
</div>

原始CSS代码 #

.parent { 
  display: flex; 
  align-items: center; 
}

问题分析 #

当前.parent使用了display:flex，默认的flex-direction是row（水平排列），所以.child-1和.child-2会在同一行垂直居中对齐。你需要让.child-2跑到.child-1的正下方，这里有两种简单的解决方案：

方案一：修改Flex方向为垂直排列（推荐） #

直接把flex-direction改成column，这样子元素会自动从上到下排列，完全符合你的需求。如果需要子元素左对齐而不是居中，可以调整align-items的值：

.parent {
  display: flex;
  flex-direction: column; /* 切换为垂直排列 */
  align-items: flex-start; /* 可选：设置子元素左对齐，默认是center */
}

这样修改后，.child-2就会乖乖待在.child-1的正下方啦~

方案二：保持水平布局但强制换行 #

如果因为某些原因需要保留flex-direction:row，可以通过让.child-1占满整行宽度来迫使.child-2换行：

.parent {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 允许Flex容器内的元素换行 */
}

.child-1 {
  width: 100%; /* 让child-1占满整个行宽 */
  /* 或者用flex属性更灵活：flex: 1 0 100%; */
}

这个方案会让.child-1占满第一行，.child-2自然就会跑到第二行去了。

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