flex: 1 不生效的首要原因是父容器未设置 display: flex（或 inline-flex），flex 布局需父子协同，缺一不可；其次常见干扰包括未清除 margin、未设 min-width: 0 导致内容撑开、混用 width 与 flex 造成冲突，以及未统一 flex-basis: 0。
父容器没设 display: flex，flex: 1 完全不生效
很多人写了 flex: 1 却发现按钮宽度毫无变化，根本原因是只给子按钮加了样式，忘了给父容器加 display: flex。Flex 布局是父子协同行为，缺一不可。
常见错误现象：按钮堆成一列、宽度固定、或完全无视 CSS 规则。
- 必须显式设置父容器
display: flex（或inline-flex） - 横向等宽默认主轴为
row，无需额外写flex-direction - 加
flex-wrap: nowrap防止小屏下意外折行（尤其按钮数多时） - 若用
justify-content: space-between，会导致首尾按钮贴边、中间留空，破坏“平均分配”意图
按钮宽度不均、有缝隙、文字换行撑开布局
即使父容器设了 display: flex，按钮仍可能不等宽——根源常在默认 margin、内容换行或 flex-basis 隐式行为。
典型表现：iOS Safari 下按钮忽宽忽窄；含图标+文字的按钮被拉伸变形；长文本按钮挤出容器。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 清除所有按钮的
margin（部分浏览器 UA 样式自带margin: 0.3em） - 每个按钮统一设
flex: 1，即flex-grow: 1; flex-shrink: 1; flex-basis: 0，关键在flex-basis: 0 - 加
min-width: 0，否则浏览器会阻止压缩长文本/URL，导致 flex 分配失效 - 按钮内文字加
white-space: nowrap，避免换行干扰宽度计算 - 用
gap控制间距，别用margin—— 后者会参与 flex 计算，易超限
为什么不用 width: 33.33%？它在移动端就是不可靠
width: 33.33% 看似直白，但在真实移动端场景中极易翻车，不是精度问题，而是模型冲突。
错误现象：横滚条出现、按钮错位、动态增减按钮时样式崩坏。
- iOS Safari 对小数百分比存在舍入误差，多个
33.33%加起来可能 >100% - 按钮数量从 3 变成 4 时，必须手动改所有 CSS，无法响应式
-
width会覆盖flex-basis，一旦和flex: 1共存，后者直接失效 - 父容器若有
padding或border，width: 33.33%不自动扣除，容易溢出
想让某按钮略宽（比如“确认”比“取消”宽），怎么微调？
Flex 的比例机制天然支持差异化宽度，不需要 JS 或额外 wrapper。
注意：不能混用 width 和 flex，也不能只改 flex-grow 而忽略 flex-basis。
- 主按钮设
flex: 2，其余设flex: 1→ 比例为 2:1:1，总份数为 4，主按钮占 50% - 确保所有按钮都设
min-width: 0，否则比例会被内容宽度顶破 - 若某按钮需固定宽度（如带图标的操作项），用
flex: 0 0 auto+ 显式width，并与其他flex: 1项隔离
min-width: 0 —— 它不是锦上添花，而是 flex 等分能成立的前提。没有它，哪怕其他都对，长文本、URL、图标组合依然会让布局当场失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
