使用flex-direction: column和justify-content可实现纵向等间距布局，需设置容器高度，推荐space-between、space-around或space-evenly值来控制垂直间距，注意避免margin干扰及内容溢出问题。
在CSS中实现Flex纵向等间距布局，关键在于使用flex-direction和justify-content属性的合理搭配。当容器设置为纵向排列时，默认主轴变为垂直方向，此时通过调整对齐方式即可实现元素间的等间距分布。
设置纵向布局方向
要让子元素沿垂直方向排列，需将父容器的flex-direction设为column。这是实现纵向布局的基础。
display: flex;flex-direction: column;
使用 justify-content 实现等间距
在纵向Flex布局中，justify-content控制主轴（即垂直方向）上的对齐方式。想要实现等间距效果，推荐使用以下值：
- space-between：首尾元素贴住两端，中间间距相等
- space-around：每个元素周围分配相等空间，视觉间距均匀
- space-evenly：所有元素间及与容器边缘的间距完全一致
例如：justify-content: space-between; 可使多个项目在竖直方向上均匀拉开距离。
立即学习“前端免费学习笔记（深入）”；
完整示例代码
以下是一个典型的纵向等间距布局实现：
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 400px; /* 需设定高度以产生间距 */
}
.item {
background: #007acc;
padding: 10px;
color: white;
}
HTML结构：
项目1项目2项目3
注意：容器必须有明确高度，否则无法展现“等间距”效果。
常见问题与注意事项
实际应用中容易忽略几点：
- 未设置容器高度会导致
justify-content无法生效 - 子元素若设置了
margin，可能影响间距计算 - 在移动端需考虑内容自适应，避免溢出
基本上就这些。掌握flex-direction: column与justify-content的配合，就能轻松实现纵向等间距布局。
