flex-direction: column在小屏下不生效，主因是父容器未设display: flex或缺乏明确高度（如min-height: 100vh），导致无法进入Flex上下文；须在媒体查询中同时声明display: flex和flex-direction: column，并添加overflow-y: auto以支持滚动。
flex-direction: column 在小屏下不生效？先检查 display 和高度
很多情况不是 flex-direction: column 失效，而是父容器压根没进入 Flex 上下文。常见漏掉的点：
• 父元素没写 display: flex 或 display: inline-flex
• 父容器高度为 auto（比如没设 min-height 或 height），导致子项无法按垂直方向分配空间
• 子项用了 float、position: absolute 或 display: none，直接脱离弹性流
• 父容器被 overflow: hidden 或 height: 0 “压扁”了，内容不可见但实际存在
响应式切换 row ↔ column 的关键：媒体查询 + flex-direction
不需要重写整个布局逻辑，只需在断点处改主轴方向：
• 默认桌面端用 flex-direction: row（水平排列）
• 小屏（如 max-width: 768px）切到 flex-direction: column
• 注意：此时 justify-content 控制的是垂直方向分布（比如 justify-content: center 是垂直居中），align-items 控制水平对齐（比如 align-items: flex-start 是左对齐）
• 别忘了给父容器加 min-height: 100vh 或明确高度，否则 column 下子项可能“挤成一团”或看不见
垂直排列后内容溢出不滚动？overflow-y: auto 必须显式加
Flex 不自动处理溢出，哪怕设置了 flex-direction: column：
• 如果子项总高度超过容器，且没设 overflow-y: auto，内容会被裁剪或撑破布局
• 滚动容器必须是直接包裹子项的那层（比如 .menu 或 .sidebar），而不是外层 wrapper
• 避免用 height: fit-content 替代高度约束——它不触发滚动，只随内容伸缩
• iOS Safari 旧版本对 min-height 支持不稳定，建议关键容器优先用 height: 100% 或 flex: 1
column-reverse 会翻转 DOM 渲染顺序，慎用于可访问性场景
如果想让最新消息在顶部（如聊天窗口），flex-direction: column-reverse 是快捷方案，但要注意：
• 焦点顺序、屏幕阅读器遍历顺序、:first-child / :last-child 伪类都会反转
• 滚动行为也反直觉：向下拖动，内容向上跑
• 容器必须有明确高度（如 height: 500px），否则顶部元素可能被挤出视口看不见
• 不要用 justify-content: flex-end 模拟翻转效果——它只是“推到底部”，不改变 DOM 顺序和语义
实际切换时最容易被忽略的是高度上下文传递：父容器没高度，子项的 flex: 1 就等于没写；滚动容器没加 overflow-y: auto，再多的 flex 设置也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
