flex布局垂直排列

在flex布局中，要实现垂直排列，可以使用flex-direction属性设置为column。这样，主轴的方向就是垂直方向，项目会从上到下依次排列。例如，可以设置外层div的样式为：
.login {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
这样，内部的项目就会在垂直方向上居中排列。\[1\]\[2\]

另外，可以通过设置内部div的样式来控制垂直排列的效果。例如，可以设置内部div的样式为：
.box {
display: flex;
justify-content: space-evenly; /* 水平均匀分布 */
align-items: center; /* 垂直居中 */
flex-direction: column;
width: 420px;
height: 420px;
}
.inner {
width: 300px;
height: 50px;
background-color: red;
}
这样，内部的div会在垂直方向上均匀分布，并且垂直居中。\[3\]
#### 引用[.reference_title]
- *1* *2* [CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距](https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/123684035)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [flex均匀垂直分布](https://blog.csdn.net/qq_36939013/article/details/105838715)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]