display:flex没生效需先查Computed中display最终值是否为flex，若非flex则被高优先级样式覆盖；若为flex但布局异常，检查父元素是否为contents/none、小程序page是否设height:100%、容器是否缺失高度或iOS旧版缺-webkit前缀。
display:flex写了但没反应？先查computed值是不是flex
不是语法错，而是样式被覆盖或未进入计算流程。Chrome DevTools 的 Computed 标签页里搜 display，看最终值是不是 flex，来源行号标在哪——这才是真实生效的值。
- 如果显示的是
block或inline，说明有更高优先级规则（比如!important、ID 选择器、内联 style）把它干掉了 - 如果显示
flex但布局仍不对，接着查父元素是否为display: contents或display: none，它们会让子容器“不可见”于 flex 上下文 - 微信小程序里还要看
page是否加了height: 100%，没这句，整条 flex 链就断在根上
Flex容器选错了父级？子元素自己设display:flex没用
Flex 布局只作用于**直接父容器**，子元素自己写 display: flex，只会让它变成一个空容器，里面没孩子，自然不排布。
- 错误写法：
.item { display: flex; }→ 想控制 item 内部，结果 item 被撑开、内容错位 - 正确写法：
.container { display: flex; }，再把.item当直系子项放进去 - 隔一层就失效：如果
.item包在.wrapper里，而你只给.item设display: flex，那.wrapper才是它父级，.item的 flex 完全不参与布局计算
容器没高度，flex:1和justify-content全白搭
尤其 flex-direction: column 时，容器若没显式高度（height、min-height 或由父级约束），子项就“看不见”——不是 bug，是 flex 没空间可分。
- 网页中：检查父级是否用了
height: 100%，但没给祖先链全部设高；更稳写法是外层加min-height: 100vh - 微信小程序中：必须
page加height: 100%，每层嵌套的 flex 容器都要有可计算高度，不能只靠flex: 1反推 - 调试技巧：临时加
background: red，一眼看出容器是否真有尺寸；Computed 里看height是0还是auto
微信小程序里display:flex被忽略？大概率缺-webkit前缀
iOS 10 及更早版本（如 iPhone 6s、iPad Air）底层 WebKit 不认标准 display: flex，只认旧前缀，漏一条就退化成 display: block。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写：
display: -webkit-box、display: -webkit-flex、display: flex - 对齐属性也得配齐：
-webkit-box-align和-webkit-box-pack是 iOS 8–9 唯一有效的，不能只写justify-content -
scroll-view上直接写display: flex必然失效，得包一层view，把 flex 相关样式全挪到这层上
