使用Flexbox对齐div#flow元素：标题与内容垂直排列问题

核心问题出在你没给每组h3和p加嵌套容器，直接把它们放在#flow里的话，Flex会把所有元素当成同级，自然只能水平排列。按下面的结构和样式调整就能实现预期效果：

1. 调整HTML结构 #

给每组标题和内容套一个容器，保证每组元素绑定：

<div id="flow">
  <div class="item-group">
    <h3>标题1</h3>
    <p>对应内容1</p>
  </div>
  <div class="item-group">
    <h3>标题2</h3>
    <p>对应内容2</p>
  </div>
  <!-- 更多标题+内容组 -->
</div>

2. 设置CSS样式 #

通过两层Flex布局实现垂直列对齐：

#flow {
  display: flex;
  flex-direction: row; /* 若要整体纵向排列所有组，改为column */
  gap: 2rem; /* 组与组之间的间距，按需调整 */
  align-items: center; /* 让所有组在垂直方向居中对齐 */
}

.item-group {
  display: flex;
  flex-direction: column; /* 强制组内h3和p垂直排列 */
  align-items: center; /* 组内元素水平居中，可选，根据需求删除或调整 */
  text-align: center; /* 文字居中，可选 */
}

关键说明 #

• 外层#flow的flex-direction控制整体布局：row是一行排多个垂直组，column是整个页面纵向排所有组
• .item-group的flex-direction: column是实现单组内标题和内容垂直排列的核心
• 不用单独给h3或p加复杂样式，通过容器层级控制对齐更简洁

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