flex-direction 在旧版 Safari 中需加 -webkit- 前缀；Firefox 中 column-reverse 可能因基线对齐错乱，应显式设置 align-items；其决定 justify-content 主轴方向；row-reverse 会分离视觉与 tab 顺序，影响可访问性。
flex-direction 在 Safari 里不生效？检查是否漏了 -webkit- 前缀
旧版 Safari（特别是 iOS 12 及更早、macOS Mojave 及之前）对 flex-direction 的原生支持不完整，部分场景下会直接忽略该声明。这不是你写错了，而是渲染引擎没认出来。
实操建议：
- 对需要兼容 iOS 12 / Safari 12 及以下的项目，
flex-direction必须同时写两遍：flex-direction: column;和-webkit-flex-direction: column; - 不要只依赖 Autoprefixer 自动补全——它默认不处理
flex-direction的-webkit-版本，需手动配置supports: true或显式启用flexbox: true选项 - 用 Safari 开发者工具检查「Computed」面板，确认最终生效的值是
column还是row；若显示initial或空白，大概率是前缀缺失
flex-direction: column-reverse 在 Firefox 中布局错乱？注意基线对齐干扰
column-reverse 本身没问题，但当子元素含内联内容（比如文字+图标）、且父容器未明确设置 align-items 或 justify-content 时，Firefox 会按 flex 基线（baseline）做隐式对齐，导致视觉上“偏移”或“换行异常”。
实操建议：
- 显式声明
align-items: stretch;或align-items: flex-start;，避免基线对齐介入 - 若子项含
vertical-align或图片，优先用align-self: flex-start;覆盖单个项的对齐行为 - 在 Firefox 中调试时，打开「Layout」面板 → 勾选「Show flexbox overlays」，直观查看主轴/交叉轴方向与对齐基准线
flex-direction 影响 justify-content 的主轴判断？必须先确认当前主轴方向
justify-content 总是作用于主轴（main axis），而主轴方向由 flex-direction 决定：设为 row 时主轴水平，column 时主轴垂直。很多人调了半天 justify-content: center 没反应，其实是误以为它总在水平方向居中。
实操建议：
- 当
flex-direction: column;时，justify-content: center;是让子元素在**垂直方向**居中，不是水平居中；想水平居中得靠align-items: center; - 用 CSS 自定义属性快速切换验证：
--dir: column;→flex-direction: var(--dir);，再同步调整justify-content和align-items的语义对应 - 避免嵌套 flex 容器时混用方向：外层
column+ 内层row是常见模式，但此时内层的justify-content主轴是水平的，和外层无关——别被层级带偏
flex-direction: row-reverse 导致子元素 tab 顺序错乱？键盘焦点流不等于 DOM 顺序
row-reverse 只改变视觉排列，DOM 顺序和可访问性（a11y）顺序仍按原始 HTML 流执行。结果就是：用 Tab 键导航时，焦点从右往左跳，但屏幕阅读器仍按左→右读，用户感知割裂。
实操建议：
- 如果业务逻辑强依赖从右到左的操作流（如倒序时间线），优先用
flex-direction: row;+direction: rtl;+text-align: right;组合，保持 DOM 顺序与视觉一致 - 若必须用
row-reverse，需手动为每个子元素加tabindex并按逆序赋值（如最后一个子项tabindex="1"，倒数第二tabindex="2"），否则无法修复焦点流 - Chrome DevTools 的「Accessibility」面板可实时预览焦点顺序，比肉眼判断可靠得多
最易被忽略的是：flex-direction 不只是样式开关，它联动着对齐逻辑、可访问性流、甚至 JS 获取的 offsetTop/offsetLeft 值——改之前，先想清楚你要动的是“眼睛看到的”，还是“程序感知的”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
