父容器未启用 Flex 布局是 flex-direction: column 无效的主因；须确认 display: flex 已设置且未被覆盖，子元素为直系、未被 position: absolute 等排除出 flex 流程。
flex-direction 改成 column 后侧边栏不堆叠？检查父容器 display 和子项 flex 顺序
直接写 flex-direction: column 却没效果，大概率是父容器根本没启用 Flex 布局。必须确认：display: flex 已设在父容器上，且没被其他样式（比如 display: grid）覆盖。另外，flex-direction: column 只影响主轴方向，它不会自动把“侧边栏 + 主内容”变成上下排列——前提是这两个元素确实是该容器的**直系子元素**。如果中间嵌套了 div 或用了 visibility: hidden 等隐藏手段，它们就不再是有效的 flex item。
- 用浏览器开发者工具检查元素 computed 样式，确认
display确实是flex，且flex-direction被正确应用 - 确保侧边栏和主内容区没有被
flex: none、position: absolute或display: contents干扰参与 flex 流程 - 如果用了
flex-wrap: wrap，column 下换行行为会异常，小屏适配时建议显式设为flex-wrap: nowrap
响应式切换 row ↔ column 时主内容区宽度突变？别依赖 flex: 1
在 flex-direction: row 下用 flex: 1 让主内容填满剩余空间，切到 column 后这个值就失效了——因为此时主轴是垂直的，flex: 1 控制的是高度，不是宽度。结果就是主内容区突然收缩或溢出。
- 小屏下改用
width: 100%显式控制主内容区横向占满，比靠 flex 生长更可靠 - 侧边栏在 column 模式下应设固定高度或
max-height，避免撑高整个视口 - 若需保留弹性逻辑，可对主内容区单独加一层 wrapper，并在 column 模式下让它
display: block; width: 100%，彻底脱离 flex 分配
用媒体查询切 flex-direction 但动画卡顿？flex-direction 本身不可过渡
flex-direction 是一个**不支持 CSS transition 的属性**，浏览器不会对它做插值计算。你看到的“卡顿”，其实是布局重排（reflow）瞬间完成导致的视觉跳变，不是性能问题。
- 不要写
transition: flex-direction 0.3s——它完全无效，只会浪费调试时间 - 想实现平滑效果，得换思路：比如先用
transform: scaleX(0)缩掉侧边栏（IE11 也支持），再切flex-direction；或者用max-height+overflow: hidden配合过渡（适合 column 下的收起） - 真要动画，优先动
flex-basis（row 模式）或max-height（column 模式），而不是碰flex-direction
移动端默认折叠侧边栏，但点击汉堡菜单后 flex-direction 切不回来？JS 操作时机不对
常见错误是 JS 在 DOM 渲染前就改了 flex-direction，或者 class 切换后没触发重排。比如用 element.classList.add('mobile-column')，但对应 CSS 规则权重太低，被其他样式覆盖。
立即学习“前端免费学习笔记（深入）”；
- 确保媒体查询中的
flex-direction: column有足够选择器权重，例如写成@media (max-width: 768px) { .sidebar-layout.mobile-column { flex-direction: column; } } - 切换前加一句
void element.offsetWidth强制触发 reflow，让浏览器“看到”旧状态再应用新样式 - 避免在 React/Vue 中直接操作 DOM 的
style.flexDirection，框架的 diff 机制可能丢弃你的修改；统一走 class 控制
flex-direction: column 不会改变 DOM 顺序，但若用 order 或 transform 调整视觉位置，屏幕阅读器可能仍按原始顺序读取。 
