小屏幕显示异常的核心解决方案是用媒体查询主动切换flex布局方向并协同调整其他属性。需设明确断点（如max-width: 767px），将flex-direction改为column，同步修改align-items、width/flex、padding/margin，并确保display: flex、box-sizing: border-box及图片max-width: 100%等基础样式完备。
小屏幕显示异常，通常是因为 Flex 容器默认的 flex-direction: row（横向排列）在窄视口下强行挤在一起，导致内容重叠、溢出或换行失控。解决核心是：**用媒体查询主动切换布局方向，并配合其他 flex 属性协同控制**。
明确断点，优先适配手机宽度
多数异常出现在宽度 ≤ 768px 的设备上，建议以 @media (max-width: 767px) 为基准断点。不要依赖“大概差不多”，直接用主流设备常用阈值：
- 手机竖屏：用
max-width: 480px或max-width: 576px处理超窄屏 - 通用小屏：
max-width: 767px覆盖绝大多数手机 - 避免只写
max-width: 768px—— 768px 常被平板横屏占用，容易误触发
改 direction 是起点，但不能只改它
仅把 flex-direction 从 row 改成 column 往往不够，还需同步调整对齐与尺寸：
-
垂直堆叠时，主轴变成纵轴：原用
justify-content: space-between水平分隔，小屏应改为align-items: stretch或align-items: center控制横向上居中/撑满 -
子项宽度需重置：桌面端设了
width: 200px或flex: 0 0 200px？小屏要改成width: 100%或flex: 1 1 100%，否则仍会窄条错位 -
别忽略 padding/margin：固定像素边距在小屏易撑破容器，建议搭配
box-sizing: border-box并考虑用rem或%缩放
用 flex-wrap + basis 实现更柔性的换行
不是所有场景都适合全切 column。比如导航菜单、商品卡片等，更适合保留横向结构但允许换行：
立即学习“前端免费学习笔记（深入）”；
- 给容器加
flex-wrap: wrap，再结合媒体查询调flex-basis - 小屏下设
.item { flex: 1 1 100%; }→ 单列 - 中屏（如 481–768px）设
flex: 1 1 calc(50% - 8px);→ 两列，gap: 16px配合防挤压 - 大屏恢复
flex: 1 1 250px→ 自适应三列或更多
检查是否遗漏关键基础样式
很多“异常”其实源于未设基础弹性规则：
- 容器没写
display: flex—— 媒体查询里改flex-direction无效 - 子项没设
flex-shrink: 0却又给了固定宽，小屏时可能被压缩变形 - 忘了
box-sizing: border-box，padding 和 border 算进 width 导致实际超宽 - 图片或 iframe 没加
max-width: 100%; height: auto;，强行撑破 flex 容器
