因为flex-direction: column只在Flex容器中生效，若父容器未设display: flex、被float/absolute脱离文档流或样式覆盖，子项仍按默认文档流排列；纵向排列后需配合高度约束、overflow-y和对齐属性调整才能正常显示与滚动。
flex-direction: column 能让 Flex 子项从上到下垂直堆叠，但它本身不等于“纵向自适应菜单”或“自动撑满高度”——多数失败案例都卡在这一步就停了。
为什么加了 flex-direction: column 但子项还是横着排？
这通常不是语法写错，而是父容器根本没进入 Flex 上下文：
- 漏写了
display: flex或display: inline-flex——flex-direction只在 Flex 容器里生效 - 父容器被其他样式覆盖，比如
display: block !important或来自框架的重置规则 - 用了
float、position: absolute等脱离文档流的写法，导致子项不再受 Flex 管控
纵向排列后内容被截断或滚动失效？检查这三处
垂直排列只是方向起点，真正决定“能不能撑开”“滚不滚得动”的是高度约束和溢出策略：
- 父容器必须有可计算高度：比如
min-height: 100vh、height: 400px，或由上层 flex 容器传下来的flex: 1 - 若需滚动，必须显式设
overflow-y: auto；只靠height: fit-content不会触发滚动条 - 避免给子项设
flex-shrink: 0同时又没限制高度——它会强行撑高父容器，反而让滚动失效
justify-content 和 align-items 在 column 下作用轴反转了
这是最常踩的逻辑坑：属性名没变，但控制方向完全调换：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
justify-content: center→ 控制**垂直居中**（主轴现在是纵轴） -
align-items: center→ 控制**水平居中**（交叉轴现在是横轴） - 如果误以为
justify-content还是管“水平”，就会发现文字明明写了 center 却靠左对齐
想让纵向菜单在窄屏分两列？flex-wrap: wrap + column 不行
Flex 规范明确限定：flex-wrap 在 flex-direction: column 下**被忽略**。浏览器直接当它不存在。
真要实现“纵向内容自动折成多列”，得换思路：
- 切回
flex-direction: row，再加flex-wrap: wrap，配合固定子项宽度（如flex: 0 0 200px） - 或者用 CSS Grid：
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) - 别在
column容器里硬塞flex-wrap，调试时看不到任何效果，纯属白费力气
真正麻烦的从来不是写 flex-direction: column 这一行，而是它背后那一整套高度继承链、溢出行为、以及 Safari 对 flex: 1 在嵌套 flex 中的解析差异——这些地方一松懈，布局就悄无声息地垮掉。
