子元素横排等宽没生效的根本原因是flex-basis默认为auto，需设为0；正确写法是子项用flex: 1（即flex: 1 1 0），并清除width冲突、确保父容器display: flex且无干扰属性。
子元素横排等宽为什么没生效？
常见现象是父容器加了 display: flex，但子项还是挤在一起、宽度不均，甚至溢出容器。根本原因不是“没写 flex”，而是没控制好空间分配逻辑。
- 子项默认
flex-basis是auto，即按内容宽度占位；想均分剩余空间，必须显式设为0 - 正确写法是子项加
flex: 1（等价于flex: 1 1 0），不是只靠display: flex - 如果子项本身有
width（比如width: 200px），会干扰flex: 1计算，得先清掉或改用flex-basis: 0 - 移动端两列布局慎用
width: 50%+flex-wrap: wrap，旧版 Android WebView 容易卡顿，改用flex: 0 0 50%更稳
justify-content 和 align-items 总是居中失败？
这不是属性写错了，而是搞混了主轴和交叉轴——它们不认“水平/垂直”，只认当前 flex-direction 的方向。
-
flex-direction: row（默认）时：justify-content控制左右（主轴），align-items控制上下（交叉轴） -
flex-direction: column时完全翻转：justify-content控制上下，align-items控制左右 - 想单独让某个子项在交叉轴上对齐（比如第三个卡片顶对齐），
align-items无效，得在该子项上写align-self: flex-start
子项换行后排列错乱或撑出容器？
flex-wrap 默认是 nowrap，很多人以为内容超宽就会自动折行，结果子项被强行压缩甚至跑出视口。
- 必须显式写
flex-wrap: wrap才能换行，此时align-content才起作用（控制多行之间的间距） - 换行后若子项仍溢出，检查是否用了
flex: auto或带width的值——文字多的项会按内容宽度先占位，再分剩余空间，容易撑宽整行 - 两行卡片布局，推荐子项统一用
flex: 0 0 50%（不放大不缩小，固定占半宽），比flex: 1+flex-wrap更可控
Flex 布局在旧版 WebView 中滚动卡顿怎么办？
这不是代码写得不够“现代”，而是渲染引擎对 width + flex-wrap 组合的重排逻辑有缺陷，尤其在部分 Android 4.x–6.x 的系统 WebView 中。
- 避免同时使用
width: 50%和flex-wrap: wrap，换成flex: 0 0 50% - 如果需要响应式列数变化（比如小屏单列、大屏三列），优先考虑
display: grid，Flex 在流式多列场景下兼容性和性能都不如 Grid -
flex: 1的隐式行为是flex-basis: 0，它会让子项无视自身内容宽度从零开始分配空间——这点极易被忽略，但恰恰是等宽布局稳定的前提
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
