Flex布局不塌陷不溢出的关键是控制flex-shrink和min-width：容器设display:flex且父级有明确宽度，子项慎用flex:1而优先flex:1 1 min-content，图片加max-width:100%;height:auto;。
Flexbox 布局怎么写才不塌陷、不溢出
Flex 容器默认不会自动约束子项尺寸，常见问题是 flex: 1 撑满后内容溢出，或图片/文字强行拉伸变形。关键在控制 flex-shrink 和 min-width。
- 容器必须设
display: flex，且父级最好有明确宽度（比如width: 100%或max-width: 1200px） - 子项慎用
flex: 1，优先写成flex: 1 1 min-content，避免压缩到文字换行异常 - 图片加
max-width: 100%; height: auto;，否则 flex 会按原始尺寸拉伸 - 避免对 flex 子项设固定
width，改用flex-basis配合flex-wrap: wrap
Media query 断点怎么选才不卡顿、不重叠
别一上来就写 @media (max-width: 768px)。真实设备像素比和视口缩放会让断点失效，尤其在 iOS Safari 中。
- 用
min-width而非max-width，从移动优先改为渐进增强（比如先写移动端样式，再用@media (min-width: 768px)覆盖平板） - 断点值建议用设计稿的栅格分界点，而非设备分辨率：如
480px（窄屏）、768px（平板竖屏）、1024px（平板横屏）、1200px（桌面窄栏） - 避免嵌套 media query，同一组件的所有响应逻辑写在同一个 CSS 块里，否则调试时容易漏掉某一层
- 加
viewportmeta 标签：<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iPhone 上768px断点根本不会触发
Flex + Media Query 组合时哪些属性会互相干扰
flex-direction 切换方向时，如果子项用了 align-items: stretch，配合 flex-wrap: wrap 可能导致高度计算错误；而 media query 中改 flex 值又容易覆盖掉原本的基线对齐。
- 横向布局（
row）下，用align-items控制垂直对齐；纵向布局（column）下，改用justify-content，别混用 - 在 media query 里重设
flex-direction时，同步检查flex-wrap是否仍为wrap，否则换行失效 - 避免在 media query 中只改
flex缩写（如flex: 0 0 100%），应明确写出flex-grow、flex-shrink、flex-basis，防止浏览器解析歧义 - Chrome DevTools 的 “Toggle device toolbar” 有时会缓存 flex 计算结果，刷新前先禁用再启用一次 layout 面板
为什么 flex 布局在某些安卓 WebView 里表现异常
Android 4.4–6.0 的系统 WebView 对 flex-wrap: wrap 和 align-content 支持不全，即使加了 -webkit- 前缀也不稳定。
立即学习“前端免费学习笔记（深入）”；
- 对老安卓兼容，优先用
flex: 0 0 100%+flex-wrap: wrap实现换行，别依赖align-content: space-between - 测试时务必真机连 Chrome Remote Debug，
chrome://inspect查看实际渲染的 computed style，不能只信模拟器 - 若必须支持 Android 4.x，考虑降级方案：用
display: block+float或inline-block，通过 media query 单独切一套样式 -
flex-basis: auto在部分旧版中会被当作0px处理，显式写成flex-basis: max-content或具体值更稳妥
min-width: auto 行为——它在不同浏览器中默认值不一致，加上 media query 后更容易出现“明明写了 width: 100%，却只占一半”的情况。调试时先查 computed style 里的 min-width 和 flex-basis，比反复改 flex 缩写更有效。 
