Flex容器必须设为display: flex且父元素不能是inline元素；图文模块需配合flex-basis或width才能换行；图片塌陷应设align-self: flex-start和height: auto；点击区域小需加touch-action: manipulation。
Flex容器必须设为display: flex，且父元素不能是inline元素
很多初学者写完flex-direction或justify-content没反应，根本原因是父容器没真正启用Flex布局。常见踩坑点：父元素是<span>或display: inline，此时display: flex会被忽略——浏览器会自动降级为display: inline-flex，但部分老版本Safari不支持后者。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
div或section这类块级语义标签作容器，避免用span包图文模块 - 检查computed styles，确认
display值确实是flex而非inline-flex或block - 移动端优先时，直接在容器上写
display: -webkit-box; display: flex;兼容iOS 8–9
flex-wrap: wrap是响应式换行的关键，但需配合子项flex-basis或width
只设flex-wrap: wrap不会自动换行——子项默认撑满一行。图文模块要“图片左、文字右；小屏变上下”，必须让子项有明确的宽度基线。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 图文并排时，给图片容器设
flex-basis: 120px（或min-width: 120px），文字区域用flex: 1 - 媒体查询中改
flex-direction: column前，先确保子项没写死width: 100%，否则小屏下文字会溢出 - 避免对子项同时设
width和flex-basis，Chrome会以flex-basis为准，Firefox旧版可能取width
图片高度塌陷？用align-items: flex-start或min-height保形
Flex默认align-items: stretch，当图文模块里图片加载慢、或文字行数不一，图片会被拉伸/压缩变形，甚至高度归零（尤其img没设height且父容器无高度）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 图片容器设
align-self: flex-start，比全局align-items更精准 - 图片本身加
height: auto; max-width: 100%，防止撑破容器 - 若需等高布局（如卡片列表），改用
align-items: stretch，但必须给文字区域设min-height兜底
移动端点击区域小？别只靠padding，用touch-action: manipulation
Flex布局常把图文压得很紧凑，iOS Safari默认300ms延迟+小触控热区，导致按钮或链接难点击。这不是Flex问题，但和响应式图文模块强相关。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 图文模块内可点击区域（如
a或button）加touch-action: manipulation - 避免用
margin扩大热区——Flex子项的margin会影响布局流，改用padding或min-width/min-height - 真机调试时，在Safari开发者工具里勾选“Disable touch delay”，快速验证是否生效
flex-direction、flex-wrap和子项尺寸约束的协同。很多人卡在“写了wrap却不换行”，其实只是忘了给子项一个可计算的基准宽度。 
