flex-direction: column 用于垂直排列子元素，适用于导航菜单、表单、全屏布局和移动端界面。设置容器 display: flex 和 flex-direction: column 后，结合 justify-content、align-items 和 flex: 1 可实现灵活的纵向布局，如头部固定、内容自适应、底部置底的经典三段式结构。
在CSS中，flex-direction: column 是Flexbox布局中的一个关键属性值，用于控制弹性容器（flex container）中子元素的排列方向。当设置为 column 时，子元素会沿着垂直方向从上到下排列。这种布局方式特别适合构建纵向结构，比如导航菜单、表单、侧边栏或移动端页面结构。
什么时候使用 flex-direction: column？
当你希望内容在垂直方向堆叠，并且需要灵活的对齐与空间分配时，flex-direction: column 就非常有用。常见应用场景包括：
- 垂直导航菜单：菜单项从上到下排列。
- 表单布局：输入框、标签、按钮等自然垂直排列。
- 全屏布局：顶部标题 + 中间内容 + 底部操作区，利用 flex 的伸缩性让内容占满剩余空间。
- 移动端界面：大多数移动页面采用纵向滚动结构。
基本语法和结构
要启用 column 布局，先将容器设为 flex 容器，再设置方向：
.container {display: flex;
flex-direction: column;
}
此时所有直接子元素都会按顺序垂直排列，每个子项占据其自身高度，总高度等于所有子项高度之和（除非设置了伸缩属性）。
立即学习“前端免费学习笔记（深入）”；
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
结合其他 Flex 属性提升布局能力
flex-direction: column 可与其他 flex 属性配合，实现更灵活的布局控制：
-
justify-content：控制垂直方向上的对齐，如
space-between可让第一个元素在顶部、最后一个到底部。 -
align-items：设置水平对齐方式，例如让所有子元素居中显示（
center）。 -
flex: 1：给中间区域设置
flex: 1，使其自动填充剩余空间，常用于“头部固定 + 内容自适应 + 底部置底”的布局。
实际例子：经典三段式布局
假设我们要做一个高度占满视口的页面，包含头部、主内容区和底部：
.container {display: flex;
flex-direction: column;
height: 100vh;
}
.header {
height: 60px;
background: #f0f0f0;
}
.main {
flex: 1;
padding: 20px;
}
.footer {
height: 40px;
background: #333;
}
在这个例子中，.main 使用 flex: 1 自动撑开，填满除头尾外的所有空间，即使窗口大小变化也能保持良好结构。
基本上就这些。只要理解了 flex-direction: column 控制的是主轴方向为垂直，就能轻松应对大多数纵向布局需求。关键是结合 flex 缩放和对齐属性，发挥 Flexbox 的真正优势。
