flex-direction 是最常被重写的弹性容器属性，需确保父容器已声明 display: flex；移动端（≤768px）用 column，桌面端（≥1025px）用 row 并配 justify-content；注意特异性、align-items 在列布局下的影响、gap 回退及性能优化。
flex 布局在不同屏幕下如何用媒体查询切换方向
直接结论：flex-direction 是最常被重写的弹性容器属性，但必须确保父容器已声明 display: flex，否则媒体查询里的修改完全无效。
常见错误是只改子项的 order 或 flex-wrap，却忘了容器本身没启用 flex 上下文。移动端竖排、桌面端横排是最典型场景。
- 小屏（
max-width: 768px）设为flex-direction: column - 中屏（
769px - 1024px）可加flex-wrap: wrap防溢出 - 大屏（
min-width: 1025px）恢复flex-direction: row并控制justify-content
.container {
display: flex;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
@media (min-width: 1025px) {
.container {
flex-direction: row;
justify-content: space-between;
}
}media query 中修改 flex 子项的 order 和 flex-basis 不生效？
根本原因通常是 CSS 特异性不足，或样式被更早定义的规则覆盖。尤其当使用框架（如 Bootstrap）时，其默认类可能带 !important 或更高权重。
实操建议优先用类名组合提升特异性，而不是依赖 !important；同时注意 order 只对同级 flex 项目生效，嵌套 flex 容器内的子项不会受外层 order 影响。
立即学习“前端免费学习笔记（深入）”；
- 写媒体查询时，选择器至少要比基础样式多一级，比如从
.item升级为.container .item -
flex-basis在flex: 1下会被忽略，需显式写成flex: 0 0 200px才可控 - 避免在多个断点里反复设置同一属性，容易互相覆盖，推荐按“移动优先”只覆盖必要项
flex + media query 做响应式导航栏时的常见错位
导航栏错位往往不是布局逻辑问题，而是 flex-wrap 和 align-items 的组合副作用。比如桌面端设了 align-items: center，但小屏换列后，center 会让所有项目垂直居中，导致文字和图标上下不对齐。
另一个高频问题是 gap 在旧版 Safari 中不支持，若用 gap: 1rem，必须配合 margin 回退方案。
- 小屏切换为 column 后，把
align-items改成flex-start更安全 - 用
gap时，紧随其后加一条margin规则（如margin-bottom: 1rem），并用@supports not (gap: 1rem)包裹 - 导航链接的
flex-shrink: 0很关键，否则小屏下文字过长会压缩按钮宽度
性能提示：别在媒体查询里频繁切换 flex 属性触发重排
虽然现代浏览器对 flex-direction 或 order 的变更优化得不错，但如果页面有大量 flex 项目（比如商品列表超 50 项），且媒体查询边界值靠近用户滚动位置，仍可能造成卡顿。
真正影响性能的是那些触发 layout 的属性，比如 width、height、margin —— 它们比纯 flex 控制更危险。所以能用 flex-basis 就别用 width。
- 优先用
flex简写（如flex: 1 1 200px）替代单独设flex-basis+flex-grow - 避免在
@media里改font-size同时又依赖flex-basis: 10em，em 值会连锁重算 - 测试时打开 Chrome DevTools 的 Rendering 面板，勾选 “Layout Shift Regions”，看是否因 flex 调整引发意外位移
最易被忽略的一点：媒体查询的断点值如果和设计稿不一致（比如用了 768px 但设计师给的是 767px），会导致 flex 布局在某个像素宽度反复切换，肉眼可见抖动。
