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;
}
此时所有直接子元素都会按顺序垂直排列，每个子项占据其自身高度，总高度等于所有子项高度之和（除非设置了伸缩属性）。
立即学习“前端免费学习笔记（深入）”；
jQuery网页全屏自适应图片瀑布流布局代码
下载
jQuery网页全屏自适应图片瀑布流布局代码，能够自适应网页的大小，这样的效果还是很酷炫的，在项目中，需要用到瀑布流，还是用自适应的会更佳，php中文网推荐下载！
结合其他 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 的真正优势。
