flex-direction: column 将主轴设为垂直方向，子元素自上而下堆叠；justify-content 控制纵向分布，align-items 控制横向对齐；需确保父容器有可计算高度或合理设置 overflow，避免内容截断。
flex-direction: column 会让子元素从上到下堆叠
默认情况下，display: flex 的主轴是水平方向（flex-direction: row），子元素并排排列。设为 column 后，主轴变成垂直方向，子元素按文档流顺序自上而下依次排列，类似传统块级元素的堆叠方式。
注意：这仅改变排列方向，不自动处理对齐或间距——仍需配合 justify-content、align-items 等属性控制布局细节。
常见错误：父容器没设 height 或 overflow 导致内容“看不见”
当子项总高度超过父容器，且父容器没设明确 height 或 max-height，又没处理 overflow 时，容易出现内容被截断、滚动失效、或子项“消失”等现象。
- 确保父容器有可计算的高度（比如
height: 100vh、min-height: 200px，或由内容撑开） - 若需滚动，加
overflow-y: auto；若不想滚动，用flex-shrink: 0防止子项被压缩 - 避免在父容器上误加
height: 0或overflow: hidden而没意识到影响
与 align-items / justify-content 搭配时的行为差异
flex-direction: column 会调换两个属性的作用轴：
立即学习“前端免费学习笔记（深入）”；
-
justify-content控制的是**主轴**（现在是垂直方向），即控制子项在纵轴上的分布（如justify-content: center让它们垂直居中） -
align-items控制的是**交叉轴**（现在是水平方向），即控制子项在横轴上的对齐（如align-items: flex-start让它们左对齐） - 容易混淆的是把
justify-content当成“水平居中”，其实它此时作用于纵向——务必看当前flex-direction值再判断
响应式中 column 和 row 切换要小心 flex-wrap 和尺寸断点
用媒体查询切换 flex-direction 很常见，但要注意：
- 如果子项宽度固定（如
width: 300px），在column下通常没问题；切回row时可能因容器太窄导致换行或溢出 - 若需多行，记得加
flex-wrap: wrap，否则所有子项会被强行挤在一行 - 移动端用
column、桌面端用row时，检查align-items是否仍符合预期（比如center在 column 下是水平居中，在 row 下是垂直居中）
实际使用中，最常被忽略的是交叉轴对齐逻辑的反转，以及父容器缺乏高度约束导致布局“失灵”。flex-direction: column 本身很简单，但它的副作用往往藏在配套属性和容器上下文中。