微信小程序中flex失效主因是容器无高度或display未被识别：page需设height:100%，ios旧版需加-webkit前缀，scroll-view内需嵌套view，类名冲突需避坑。
Flex容器没设高度，flex:1和flex-grow就必然失效
微信小程序的 page 根节点默认没有高度，所有子级 view 的高度都依赖父级传导。如果中间某层容器没显式设置 height（比如用 height: 100% 或具体像素值），那它的子元素即使写了 flex: 1，也会因为“无空间可分”而退化为内容高度。
-
page必须加height: 100%，否则整个页面 flex 链就断了 - 每层嵌套的 flex 容器，只要它需要撑开子项，就得有明确高度——不能只靠
flex: 1向上反推 - 用开发者工具选中容器，在 “Computed” 面板里直接看
height值是否为0或auto，这是最准的判断依据
iOS 旧版本（iOS 10 及更早）不认 display: flex，只认 WebKit 旧前缀
这不是小程序 bug，而是底层 WebKit 内核限制。iPhone 6s（iOS 10.3.3）、iPad Air（iOS 9）等设备上，仅写 display: flex 会被当作文本忽略，整个容器退化为 display: block，导致 justify-content、align-items 全部失灵。
- 必须同时声明：
display: -webkit-box、display: -webkit-flex、display: flex -
-webkit-box-align和-webkit-box-pack是 iOS 8–9 唯一有效的对齐方式，不能省略 -
flex: 1要配套-webkit-box-flex: 1和-webkit-flex: 1才能生效 - 手动补前缀容易漏，推荐在构建流程中接入
postcss-loader+autoprefixer，目标浏览器配ios
scroll-view 上直接写 display: flex 会失效
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
scroll-view 是原生组件，其内部渲染机制不完全遵循标准 CSS 盒模型。直接在它上面设 display: flex，iOS 和部分安卓 WebView 会忽略该声明，子元素仍按普通流排列。
- 正确做法：在
scroll-view内部包一层view，把display: flex和相关属性全挪到这层上 - 不要试图给
scroll-view加height或flex: 1—— 它本身不参与 flex 分配逻辑 - 横向滚动时，还要注意
white-space: nowrap和子项flex-shrink: 0，否则内容会被压缩
类名冲突或 WXSS 作用域问题导致 flex 样式被覆盖
微信小程序的 WXSS 有局部作用域机制，但某些通用类名（如 container、row、col）可能被框架、插件甚至开发者工具内置样式污染。你写的 display: flex 看似生效，实则被更高优先级规则重置。
- 用开发者工具检查元素，看 computed 样式里
display最终值是不是flex，如果不是，点开来源看哪条规则把它干掉了 - 避免用
container这类泛用类名，改用带业务前缀的，比如home-card-list - 全局样式（
app.wxss）里的规则可能意外影响页面，可用!important快速验证是否是优先级问题（仅调试用）
真正卡住人的，往往不是 flex 属性写错，而是容器本身“不存在高度”或“没被正确识别为 flex 容器”——前者查 computed height，后者盯紧 display 声明是否被覆盖或降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
