flex-direction: column 在小屏下不生效的直接原因是 display: flex 未在媒体查询中显式声明，或被 display: grid、position: absolute 等样式覆盖；需在 @media 中完整重写 display: flex 和 flex-direction，并配合 width: 100% 或 flex: 1 确保子项垂直堆叠填满。
flex-direction: column 在小屏下不生效？检查媒体查询和 flex 容器声明
直接原因往往是 display: flex 没在小屏规则里重新声明，或者父容器被其他样式（比如 display: grid）覆盖了。Flex 布局必须先有 display: flex，flex-direction 才能起作用。
常见错误现象：flex-direction: column 写了但子元素还是横排；开发者工具里看到该样式被划掉（strikethrough）。
- 确保媒体查询内完整重写容器的 flex 行为：
@media (max-width: 768px) { .footer { display: flex; flex-direction: column; } } - 避免在大屏规则里用
display: grid，小屏再切回 flex —— 浏览器不会自动“降级”，必须显式声明display: flex - 如果页脚用了
position: absolute或float，它们会破坏 flex 上下文，先清掉这些
子元素宽度没撑满？别只靠 flex-direction
flex-direction: column 只控制主轴方向，不影响子项在交叉轴（cross axis）上的尺寸。小屏垂直堆叠时，你通常希望每个栏（比如 .footer-col）独占一行、100% 宽度 —— 这得靠 width: 100% 或 flex: 1 配合对齐控制。
- 默认情况下，flex 子项在交叉轴（小屏下是水平方向）会按内容宽度收缩，不是自动 100%
- 加
align-items: stretch（flex 默认值，一般不用显式写），但前提是父容器没设align-items: center这类限制 - 更稳妥：给子项加
width: 100%，或用flex: 1 1 100%确保它拉伸填满
响应式断点选 768px 还是 600px？看真实内容而非设备分类
硬套“平板/手机”分界容易翻车。实际决定因素是页脚文字长度、图标尺寸、行高 —— 当两栏开始换行错乱、文字被截断、间距过紧时，就是该切 column 的信号。
- 用浏览器调试器拖动窗口宽度，观察
.footer-col内容何时开始挤压变形，那个像素值就是你的断点 - 避免多个断点嵌套（比如
@media (max-width: 768px) { ... @media (max-width: 480px) { ... }），多数页脚两档足够：桌面横排 → 小屏单列 - 如果页脚有图标+文字组合，注意
font-size和padding是否随屏幕缩小而同比例缩放，否则单列后文字可能过大、留白失控
IE11 下 flex-direction 不兼容？优先用 display: table 回退
IE11 对 flex-direction 支持有限，尤其涉及 column 和 flex-wrap 组合时容易崩。现代项目可忽略，但若需支持 IE11，别强行 polyfill flex，改用更稳的老方案。
- 不要依赖
-ms-flex-direction前缀 —— 它在 IE11 中行为不稳定，常导致子项消失或高度塌陷 - 回退方案：小屏下改用
display: table+display: table-row/display: table-cell，虽语义弱但兼容性极好 - 用
@supports not (flex-direction: column)包裹 flex 规则，把 table 方案放在外面作为默认，避免 CSS 覆盖冲突
flex-direction 切过去了就自动变好。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
