应使用 display: inline-flex 而非 flex，使按钮保持内联特性、支持 vertical-align、可并排自适应；需配合 flex-direction: row、align-items: center、min-width: 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及合理 max-width 才能实现预期效果。
display: flex 会让按钮变成块级元素、独占一行，根本不能“随容器宽度自适应伸缩”——你要的是它能缩放、能并排、能留白，而不是一上来就撑满整行。
用 display: inline-flex 而不是 flex
按钮要像文字一样自然嵌在段落或工具栏里，又得保持内部子元素（比如图标+文字）的弹性对齐，inline-flex 是唯一同时满足三点的方案：只占内容宽度、支持 vertical-align、IE11+ 原生兼容。
- 别写
display: flex—— 它会让按钮变块级，哪怕里面只有“确定”两个字也会横跨父容器全宽 -
display: inline-flex让按钮表现得像一个“可伸缩的内联盒子”，和旁边的span或文字自然并排 - 必须显式加
flex-direction: row和align-items: center，否则某些 UA 样式下文字会贴顶或错位 - 禁止给按钮本身设
width、min-width或max-width，否则直接覆盖自适应逻辑
父容器没撑开，inline-flex 也白搭
常见现象：按钮明明写了 inline-flex，但宽度还是死的、不随文字变——大概率是父容器没传递有效宽度上下文。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
html和body默认不继承视口宽度，必须重置：html, body { margin: 0; padding: 0; width: 100%; } - 移动端漏了
<meta name="viewport" content="width=device-width, initial-scale=1.0">，iOS Safari 会按 980px 渲染，所有百分比计算都错 - 如果按钮包在
div里，而该div是display: flex的子项，默认有min-width: auto，会阻止按钮收缩，得加min-width: 0
文字过长时怎么截断显示省略号？
inline-flex 本身不处理溢出，长文本（比如动态文件名）会把按钮撑开甚至换行——要手动加三件套，缺一不可。
- 在
button上加white-space: nowrap：防止文字意外折行 - 加
overflow: hidden和text-overflow: ellipsis：触发省略号机制 - 必须设
max-width（如max-width: 200px）：没有这个值，ellipsis永远不生效 - 注意父容器不能有
overflow: hidden，否则整个按钮会被裁掉，不是只裁文字
Flexbox 容器里按钮伸缩失效的典型原因
当按钮放在 display: flex 的父容器中（比如导航栏），想让它填满剩余空间，却卡在最小宽度不动——问题往往不在按钮本身。
- 同级其他元素（如 logo、菜单项）没设
flex: none或固定宽，导致按钮被挤压后无法伸展 - 按钮自己没加
flex: 1，或者加了但漏了min-width: 0（flex 项默认min-width: auto，会锁住最小宽度） - 父容器用了
flex-wrap: wrap却没设width，浏览器无法确定“剩余空间”有多大 - 按钮内部用了
display: block的子元素（如span），会破坏inline-flex的内联流特性
真正起作用的永远不是单个属性，而是那一组配合起来才成立的约束条件：inline-flex 只是入口，后面每一步漏掉一个，自适应就断在那儿。最常被跳过的其实是 min-width: 0 和 white-space: nowrap——它们不显眼，但一缺就全崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
