小屏幕下flex-direction必须改为column，否则文字挤压、按钮截断；建议默认row，768px内覆盖为column，并检查子项宽高与justify-content设置。
flex-direction 在小屏幕下该不该改成 column
多数响应式布局里，flex-direction: row 在桌面端排成一行很自然，但手机竖屏时横向空间严重不足，文字挤在一起、按钮被截断——这时候必须切到 column。不是“可以改”，而是“不改就出问题”。
实操建议：
• 默认设为 flex-direction: row，在 @media (max-width: 768px) 内覆盖为 column
• 如果子项本身有固定宽高（比如 width: 200px），切 column 后要同步检查 height 是否导致溢出
• 避免在 column 下还用 justify-content: space-between 拉开过长空白，尤其当内容项少于 3 个时
flex-wrap 要不要在中屏触发换行
flex-wrap: nowrap 是默认值，适合控件少、宽度富余的场景；但平板横屏（比如 1024px）常出现子项被压缩变形或文字折行错乱——这时开 flex-wrap: wrap 比强行缩放更可靠。
实操建议：
• 不要在移动端小屏（max-width: 480px）开 wrap，容易让单行按钮变成两行堆叠，破坏操作流
• 中屏（640px–1024px）加 flex-wrap: wrap，同时给子项加 flex-basis: 45% 控制每行最多两个
• 若子项含图片，flex-wrap 开启后务必设 min-width: 0，否则图片可能撑破容器
flex-grow 和 flex-basis 怎么配合媒体查询防拉伸失真
flex-grow: 1 在空间不足时会强制拉伸子项，常见后果是文字被压扁、图标比例失调。这不是 flex 本身的问题，而是没结合屏幕尺寸约束基础尺寸。
实操建议：
• 桌面端可设 flex: 1 1 250px（即 flex-grow: 1, flex-shrink: 1, flex-basis: 250px）
• 小屏下改用 flex: 0 1 100%，禁止拉伸，允许收缩，确保占满整行
• 避免在媒体查询里只改 flex-grow 而忽略 flex-basis，否则基线丢失，不同屏幕渲染结果不可预测
@media 查询里重设 justify-content 容易踩什么坑
justify-content: space-around 在桌面端让导航栏按钮间距均匀，但小屏下按钮变多、宽度变窄时，两侧留白会吃掉关键可点击区域，甚至把第一个/最后一个按钮挤出视口。
实操建议：
• 小屏统一改用 justify-content: flex-start 或 center，避免依赖“平均分配”逻辑
• 如果必须保留间距感，用 gap 替代 justify-content（注意兼容性：IE 不支持 gap，需降级为 margin）
• 别在同一个媒体查询里反复切换 justify-content 值（比如从 space-between → center → flex-end），人眼会感知跳动，尤其在 iOS Safari 滚动时
立即学习“前端免费学习笔记（深入）”；
真正难的不是写几个 @media，而是每个断点下都要验证 flex 的三个维度（方向、换行、伸缩）是否协同——漏调一个，用户看到的就是错位、溢出或点击失效。
