flex-direction: column 将主轴设为纵向，子元素自上而下堆叠；justify-content 控制上下对齐，align-items 控制左右对齐，需配合使用实现垂直流式布局。

用 flex-direction: column 实现垂直流式排版，核心是把 flex 容器的主轴设为纵向，让子元素从上到下依次排列。它本身不负责对齐或间距，需配合其他 Flex 属性协同使用。

基础写法：设置容器为 column 方向

只需在父容器（flex 容器）上声明：

display: flex;
flex-direction: column;

此时所有直接子元素默认从顶部开始、自上而下堆叠，形成垂直流式布局。注意：子元素宽度默认撑满容器，高度由内容决定。

控制子项的垂直对齐（主轴对齐）

主轴现在是垂直方向，所以 justify-content 控制的是**上下方向的对齐方式**：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• justify-content: flex-start（默认）→ 顶部对齐，元素紧贴容器上边缘
• justify-content: flex-end → 底部对齐，元素紧贴容器下边缘
• justify-content: center → 居中对齐，整体在容器中垂直居中
• justify-content: space-between → 首尾贴边，中间等距分布
• justify-content: space-around → 每个元素周围留等量空白

控制子项的水平对齐（交叉轴对齐）

交叉轴变为水平方向，因此 align-items 控制的是**左右方向的对齐方式**：

• align-items: stretch（默认）→ 子元素宽度拉伸至填满容器（除非设置了固定宽）
• align-items: flex-start → 左对齐（内容左端对齐容器左边缘）
• align-items: center → 水平居中
• align-items: flex-end → 右对齐

常见实用组合示例

比如做一个垂直居中卡片列表：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

再如导航菜单垂直排列并左对齐文字：

nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
nav a {
  width: 100%;
  text-align: left;
}

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！