flex容器未生效需先确认display: flex是否作用于正确父元素且该父元素有可计算高度；rpx慎用于flex-basis等影响布局骨架的属性，避免跨设备尺寸偏差。
flex容器没生效？先确认display和父级高度
很多“错位”其实根本不是flex的问题，而是容器压根没进入flex上下文。常见现象是子元素依然堆叠、不换行、无法居中，或者justify-content完全没反应。
必须检查两点：display: flex是否写在了正确的父元素上；该父元素是否有可计算的高度。小程序中height: 100%不会自动继承，除非整条链路（page → view → 子容器）都显式设了height: 100%或flex: 1。
- 错误写法：
.container { display: flex; }，但.container的父级没设高度，自身又没内容撑开，结果高度为0 - 正确写法：外层
page加height: 100%，容器用flex: 1或height: 100%，再设display: flex - 调试技巧：给容器加
background: red，一眼看出它是否真有尺寸
rpx值混进flex属性里会出什么问题？
Flex相关属性（如flex-basis、min-width、padding）理论上支持rpx，但实际中极易引发错位——尤其当rpx参与计算后导致宽度溢出或收缩异常时。
比如写flex-basis: 300rpx，在iPhone 6（375px宽）上算出来是150px，在iPad（约1024px宽）上却变成409px，远超预期。更麻烦的是，flex-shrink会基于这个动态值做缩放，不同设备行为不一致。
- 推荐做法：flex容器自身的尺寸（
width/height）用rpx或百分比；子项的弹性行为（flex、flex-grow等）只用无单位数字，避免rpx介入计算逻辑 - 危险组合：不要写
flex: 1 1 200rpx，改用flex: 1+ 单独min-width: 200rpx（并评估是否真需要） - 边框/内边距慎用rpx：细线用
border: 1px solid #ccc更稳，padding: 20rpx在小屏可能过小，大屏又过大
justify-content和align-items失效的典型场景
这两个属性“看起来没用”，大概率是因为主轴/交叉轴方向没对，或者容器本身没有可用空间。
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
例如：设了flex-direction: column，却还用justify-content: center想水平居中——这是错的，此时主轴是垂直的，justify-content控制的是垂直对齐，水平对齐得靠align-items: center。
- 快速自查：打开开发者工具，选中容器，看“Computed”面板里
flex-direction值；再看容器尺寸是否非零 - iPad横屏时
windowWidth变大，若用rpx设了固定width: 750rpx，容器就可能超出屏幕，导致justify-content把内容挤到可视区外 - 文字截断+flex居中组合时，
text-overflow: ellipsis需配合white-space: nowrap和overflow: hidden，否则flex计算会失准
为什么flex子项在某些安卓机上突然换行？
这不是bug，是flex-wrap默认值nowrap被意外打破。根本原因常出在rpx换算后，子项总宽度略微超过容器可用宽度（比如因浮点误差或多一层border-box计算偏差），触发了隐式换行。
尤其当多个view并排、每个都设了width: 250rpx（期望三列），但在某台412px宽手机上，250 * (412/750) ≈ 137.33px，三列合计412px，刚好卡满；一旦加上padding或border，就超了。
- 解法一：统一用
box-sizing: border-box，确保padding/border不撑宽 - 解法二：子项用
flex: 1替代固定width，让flex自己均分空间 - 解法三：容器加
flex-wrap: nowrap显式锁定，并用overflow-x: auto兜底滚动
最易被忽略的点是：rpx在flex计算中不参与“弹性系数”运算，但它直接影响初始尺寸，而初始尺寸一旦出偏差，flex的后续分配就会雪球式放大。别让rpx出现在flex-basis或min/max-width这种决定布局骨架的地方，除非你明确知道每台设备上它算出来是多少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
