flex-basis: 50% 是主轴初始尺寸，width: 50% 仅在 flex-basis: auto 时作 fallback；flex-basis 绑定主轴（row 为宽、column 为高），受 box-sizing 和旧版 WebView 兼容性影响大，推荐用 flex: 0 0 200px 或 flex: 1 1 0 替代。
flex-basis: 50% 和 width: 50% 在 flex 容器里根本不是同一类东西
它们不互为替代，也不构成“优先级高低”关系——flex-basis 是 Flex 布局中主轴方向的“初始尺寸入场值”，而 width 是传统盒模型下的静态尺寸声明。一旦父容器设了 display: flex，width 就退居为 fallback，且只在 flex-basis: auto 时才可能被读取。
常见错误现象：写了 width: 300px; flex-basis: 50%;，结果发现宽度始终按 50% 算，width 完全没生效——这不是浏览器“忽略”了它，而是布局引擎压根没走到解析 width 那一步。
关键点：
-
flex-basis: 50%是相对于父容器主轴尺寸计算的（比如flex-direction: row时，是父容器宽度的 50%） -
width: 50%是 CSS 通用规则，但仅当flex-basis为auto且内容无固有宽时，才可能作为第三顺位 fallback 被采用 - 百分比
flex-basis在 Android WebView 4.4–5.1 中存在解析偏差，常导致尺寸错乱（2026 年仍有不少存量设备）
flex-direction 改变后，flex-basis: 50% 突然控制高度？
因为 flex-basis 永远绑定主轴，不绑定 width 或 height 这两个名字。当父容器从 row 切到 column，主轴就从水平变成垂直，flex-basis: 50% 就自动变成“父容器高度的 50%”，此时 width 反而退到交叉轴，失去空间分配权。
立即学习“前端免费学习笔记（深入）”；
典型翻车场景：
- 响应式断点中把
flex-direction切成column，但忘了改flex-basis: 200px→ 项目高度被锁死，内容溢出或塌缩 - 写
flex-basis: 50%本意是“占满一半宽度”，切到column后却变成“占满一半高度”，视觉完全失控 - 若父容器没设
height，flex-basis: 50%在column下会按 0 计算（因父高未定义），导致子项高度塌陷
想稳定控制尺寸，别单靠 flex-basis 或 width
单独用 width 在 flex 容器里不可靠；单独用 flex-basis 又容易忽略伸缩行为。真正可控的做法是用 flex 缩写一次性锁定三要素：
-
flex: 0 0 200px→ 不增长、不收缩、基准尺寸 200px（最常用，等价于固定宽高） -
flex: 0 1 200px→ 允许压缩但禁止拉伸，适合窄屏收窄 -
flex: none看似简洁，但它等价于flex: 0 0 auto，仍依赖内容宽度，不如显式写flex-basis精确 - 若必须用百分比，优先考虑
flex-basis: 0+flex-grow分配（如flex: 1 1 0），避免百分比在旧环境中的兼容性问题
padding 和 border 会让 flex-basis: 50% 撑破容器
flex-basis 的计算默认不含 padding 和 border（box-sizing 默认为 content-box）。所以 flex-basis: 50% + padding: 10px + border: 1px solid 很可能让总宽超过 50%，尤其在多列并排时容易溢出。
解决办法只有两个：
- 统一加
box-sizing: border-box，让flex-basis包含 padding 和 border - 改用
flex: 0 0 calc(50% - 22px)手动减去内外边距（但 calc 在旧 Android WebView 中支持有限）
百分比 flex-basis 表面直观，实则暗坑密集——它既受父容器主轴尺寸影响，又绕不开 box-sizing 和历史兼容性，真要稳，宁可拆成 flex-basis: 0 + flex-grow，或者直接上 grid。
