flex-direction不能直接动画，因其不属于css可动画属性，浏览器会忽略transition声明；切换本质是布局重排，需用gap、transform等替代方案或媒体查询配合display:flex整体切换。
flex-direction在媒体查询里为什么不能直接动画？
因为 flex-direction 不是 CSS 动画属性（CSS Animatable Properties），浏览器不支持对其做 transition 或 @keyframes。你写 transition: flex-direction 0.3s 完全无效，控制台也不会报错——它就默默忽略。
常见错误现象：在移动端想让 .row 从 column 切到 row，加了 transition 却毫无过渡感，以为是写错了断点或选择器。
- 真正可过渡的 flex 相关属性只有：
flex-basis、flex-grow、flex-shrink、order -
flex-direction的切换本质是布局重排（reflow），不是视觉渐变 - 如果强求“过渡感”，得用
transform: scaleY()或 opacity 配合 visibility 隐藏/显示替代方案，但语义和可访问性会受损
用 min-width + flex-direction 实现横竖切换的典型写法
移动端优先是主流做法，所以默认设为 column，大屏再切回 row。这种写法干净、语义清晰、无障碍友好。
.card-stack {
display: flex;
flex-direction: column; /* 移动端：竖向堆叠 */
}
<p>@media (min-width: 768px) {
.card-stack {
flex-direction: row; /<em> 平板起：横向并排 </em>/
flex-wrap: wrap; /<em> 可选：防止溢出 </em>/
}
}
</p>
- 注意不要混用
flex-direction: row和flex-direction: column-reverse这类反向值在同一个断点逻辑里，容易导致阅读顺序混乱（影响屏幕阅读器） - 若需在小屏也保持部分横向（比如图标+文字），建议改用
inline-flex或display: grid，而非强行切 direction - Bootstrap 5 的
.flex-column/.flex-md-row类就是基于这套逻辑生成的，本质就是媒体查询 + direction 切换
当 flex-direction 切换后子元素间距错乱怎么办？
因为 flex-direction 改变后，原本依赖 margin-bottom 的垂直间距，在 row 下会变成水平方向的干扰项，造成意外留白或重叠。
根本原因是：你把布局逻辑耦合进了 margin，而不是用 flex 自身的对齐机制。
- ✅ 正确做法：统一用
gap（现代浏览器支持良好，2026 年已覆盖 98%+） - ❌ 错误做法：在 column 下写
.item { margin-bottom: 1rem; }，指望它在 row 下自动转成 right margin - 兼容 fallback 方案：用
justify-content: space-between或align-items: center替代硬编码 margin，再配合:not(:last-child)控制间距
为什么有时写了 @media 却没生效？检查这三点
最常被忽略的是媒体查询的优先级和作用域问题，不是代码写错了，而是被其他样式覆盖或未命中条件。
- 检查是否漏写了
display: flex——flex-direction对非 flex 容器完全无效 - 确认媒体查询的断点值是否被其他同名类（如 Bootstrap 的
.d-md-flex）覆盖，用浏览器开发者工具看 computed 样式中flex-direction的来源 - 留意视口设置：
<meta name="viewport" content="width=device-width">缺失会导致min-width媒体查询在移动设备上按桌面宽度计算，永远不触发
复杂点在于：flex-direction 切换不是孤立动作，它牵动 gap、justify-content、子项 width 百分比、甚至文本折行行为。别只盯着一个属性改，要把它当成布局模式的整体切换来看待。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
