flex布局在不同屏幕下失效的主因是媒体查询未显式维持flex上下文：必须在每个断点中完整声明display: flex、flex-direction、flex-wrap、order及align-content等属性，缺一不可。
flex 布局在不同屏幕宽度下失效？先检查 flex 容器是否被媒体查询重置
很多情况下，flex 布局在小屏下“突然不生效”，不是 flex 本身有问题，而是媒体查询里误写了 display: block 或漏掉了 display: flex。媒体查询不会继承父级的 display 值，必须显式声明。
- 所有断点内，只要需要 flex 行为，就必须写
display: flex（或inline-flex） - 别依赖“之前已经设过”，媒体查询是独立作用域
- 常见错误：
@media (max-width: 768px) { .container { flex-direction: column; } }—— 缺少display: flex，这行不会让容器变 flex
flex-direction 切换时子元素 order 不生效？确认 order 值在各断点中持续定义
order 属性只在 flex 容器内起作用，且它的值不会自动继承或保留。如果你在桌面端设了 order: 2，但在移动端媒体查询里没重写，浏览器会按初始值 0 渲染，导致顺序“跳回”。
- 每个需要调整顺序的断点，都要显式设置
order - 避免用
order: initial，它等价于0，容易掩盖逻辑 - 示例：想让移动端把侧边栏移到内容下方，不能只改
flex-direction，还要同步控制order
.sidebar { order: 2; }
.content { order: 1; }
<p>@media (max-width: 768px) {
.sidebar { order: 2; } /<em> 显式保留，避免意外重置 </em>/
.content { order: 1; }
.container { flex-direction: column; }
}</p>
flex-wrap: wrap 在小屏下撑宽容器？用 max-width + flex-basis 控制单行宽度
当子项使用 flex: 1 或 flex: 0 1 auto 时，在窄屏下可能因内容过长导致整行无法换行，反而把容器横向撑开，出现水平滚动条。
- 给子项加
flex-basis（如flex-basis: 100%），配合flex-wrap: wrap才能真正换行 - 慎用
flex: 1在响应式场景——它强制占据剩余空间，不考虑换行需求 - 搭配
min-width: 0防止文本溢出拉伸（尤其含长单词或 URL 的元素）
.card {
flex: 0 1 calc(50% - 1rem); /* 桌面双列 */
min-width: 0;
}
<p>@media (max-width: 480px) {
.card {
flex-basis: 100%; /<em> 移动端单列 </em>/
}
}</p>
justify-content 和 align-items 在媒体查询中行为异常？注意 align-content 不影响单行 flex
在多行 flex（flex-wrap: wrap）中，justify-content 只控制主轴上各行之间的间距，而 align-content 才控制行与行在交叉轴上的对齐。很多人误以为 align-items 能垂直居中多行，其实它只对每行内的项目生效。
- 单行 flex：用
justify-content+align-items - 多行 flex：需额外设置
align-content（如flex-start、center、stretch） - 媒体查询切换
flex-wrap时，记得同步检查是否要补align-content
flex 布局和媒体查询结合的关键，不在“怎么写断点”，而在“每个断点是否完整维持 flex 上下文”——包括 display、flex-direction、flex-wrap、order、align-content 这些属性，缺一不可。漏掉任意一个，都可能让布局在某个尺寸下“看起来没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
