flex-direction: column 本身不生效，因父容器未设 display: flex；需配合高度约束、子项 display 声明及 gap/align-items 等属性才能实现可靠垂直排列。
flex-direction: column 是让子元素垂直排列的最可靠方式，但仅写这一行 CSS 不会生效——它必须依附于一个已启用 Flex 上下文的容器。
为什么 flex-direction: column 没效果？
常见原因不是属性写错，而是父容器根本没进入 Flex 模式：
-
display: flex或display: inline-flex缺失（flex-direction在非 Flex 容器中被完全忽略） - 父元素被
float、position: absolute或第三方 CSS 的display: block !important覆盖 - 子元素是
<a>之类默认display: inline的标签，没设display: block或display: flex，导致高度塌陷、点击热区窄
垂直排列时 align-items 和 justify-content 怎么配？
主轴变成垂直后，两个对齐属性的作用轴会互换：
-
justify-content控制**上下方向**（原主轴）：用flex-start（顶对齐）、center（居中）、flex-end（底对齐） -
align-items控制**左右方向**（原交叉轴）：用flex-start（左对齐）、center（水平居中）、flex-end（右对齐） - 别混淆：当
flex-direction: column时，align-items: center让所有子项水平居中，不是垂直居中
用 gap 还是 margin 控制间距？
gap 是更干净的选择，但它有兼容性边界：
-
gap只作用于 Flex 和 Grid 容器，不支持display: block或老式浮动布局 - 现代浏览器（Chrome 89+、Firefox 63+、Safari 14.1+）完全支持；IE 和旧 Android WebView 需回退到
margin-bottom - 若子项高度不固定，
gap更稳定；用margin时要注意首尾项多出的空白，常需:first-child/:last-child清除
移动端或 Safari 下容易崩的点
真机上垂直布局失效，往往卡在高度继承链断裂：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
min-height: 100vh或height: 100dvh，导致 Flex 主轴无长度可分配 - iOS 微信 WebView 对
min-height解析不稳定，关键容器要补height: 100%或flex: 1 -
a标签没设padding和min-height，文字被压成一条线，视觉上像“没排开” - 忘了加
box-sizing: border-box，border 或 padding 加宽后撑破容器宽度，尤其在align-items: center下表现诡异
flex-direction: column 稳住的，从来不是那行代码本身，而是它上下游的高度控制、display 声明、以及 Safari 对 flex: 1 嵌套的解析差异——这些地方松一扣，页面就静默错位。 
