flex-basis 是 flex 子项宽度计算的起点，而非最终宽度；实际宽度由 flex-basis 起始，再经 flex-grow/shrink 动态调整，且受 min-content、替换元素固有尺寸及 box-sizing/gap 等因素影响。

flex-basis 是起点，不是最终宽度

Flex 子项的“实际宽度”不是直接由 width 决定的，而是从 flex-basis 开始，再按 flex-grow 和 flex-shrink 动态调整。哪怕你写了 width: 200px，只要没显式设 flex-basis，浏览器就按 flex-basis: auto 处理——它会取 width、min-width、内容固有宽度三者中的最大值作为起点。

常见错误现象：开发者工具里看到 computed width 是 187px，但自己写了 width: 200px，以为样式失效；其实是 flex-shrink: 1 在容器空间不足时把它压到了 187px。

• flex-basis: 0px 或 flex-basis: 0% 才真正放弃内容尺寸，让 flex-grow 主导分配（推荐用 0px，IE11 更稳）
• flex: 1 等价于 flex: 1 1 0%，第三个参数才是关键
• 如果子项是 img 或 input 这类替换元素，flex-basis: auto 会优先取其固有宽，width 反而被忽略

flex-grow 分配剩余空间，但受 min-content 限制

当所有子项 flex-grow 相同（如都为 1），剩余空间会等分；但若某子项内含长单词、URL 或 white-space: nowrap 元素，它的 min-content 就会卡住分配过程——哪怕其他项已收缩到 0，它也不会低于这个最小宽度。

典型表现：三个 flex: 1 的按钮并排，中间那个写了 “https://very-long-domain-name.example.com”，整行被撑开，左右按钮被压缩甚至换行。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 解决方法不是调 flex-grow，而是控制内容：加 white-space: normal、word-break: break-word 或 min-width: 0
• min-width: 0 对 img、span 等元素特别重要，否则它们自带 min-width: auto，flex-shrink 形同虚设
• 调试时看开发者工具 Layout 面板里的 “Min Content Size”，比盯着 width 值更准

box-sizing 和 gap 会影响视觉宽度，但不参与 flex 计算

box-sizing: border-box 改变的是元素自身盒模型解释方式，不影响 flex 分配逻辑；gap 是容器级间隙，也不占用子项的 flex 空间。但它们会让“看起来的宽度”和“参与计算的宽度”不一致。

例如：父容器宽 600px，两个子项各 flex: 1，再加 gap: 20px。每个子项 flex 分配到的是 (600 − 20) ÷ 2 = 290px，但加上 padding: 12px 后，若没设 box-sizing: border-box，实际占位就是 290 + 24 = 314px，总宽超 600px。

• 必须给所有 Flex 子项统一加 box-sizing: border-box，否则 padding/border 会悄悄撑破布局
• gap 比 margin 安全得多：它不计入子项尺寸，也不触发 margin collapse
• 伪元素（::before/::after）不继承 box-sizing，需单独声明

JavaScript 读取时 getComputedStyle 和 getBoundingClientRect 不等价

JS 获取宽度时，getComputedStyle(element).width 返回的是 CSS 中声明的 width 值（content-box 语义），和 flex 实际渲染结果无关；而 element.getBoundingClientRect().width 返回的是真实渲染像素宽，包含 padding、border、gap 影响后的结果。

常见误用：用 getComputedStyle 判断 flex 子项是否被压缩，结果总是“没变”，因为该 API 根本不反映 flex 运行时重算。

• 要测真实渲染宽，必须用 getBoundingClientRect()
• 若需监听 flex 宽度变化，可用 ResizeObserver，别轮询 getBoundingClientRect
• 服务端渲染或 SSR 场景下，getBoundingClientRect 返回 0，需等 layout 完成后再读

实际宽度永远是 flex 引擎运行时算出来的结果，不是写在 CSS 里的某个单一属性。最常被忽略的是：内容本身的 min-content 和替换元素的隐性约束，它们不报错、不警告，只在布局错位时才暴露。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！