本文介绍如何在 flex 布局中不依赖实际可见内容，而是通过 css 自定义属性（如 `--char-count`）为 `
` 指定逻辑尺寸，实现基于“幽灵内容”长度的弹性分配。该方法无需 javascript，语义清晰、可维护性强。
在现代 CSS 布局中，有时我们需要让一个元素的尺寸表现“像有更多内容”，而非受限于其真实文本内容——例如，在导航栏或标签页中统一视觉权重，或确保按钮宽度与最长潜在文案对齐。此时，“幽灵内容”（ghost content）并非真正渲染，而是一种尺寸占位策略。
核心思路是：放弃直接依赖 flex-grow 的绝对增长行为，转而使用 flex 简写属性配合 CSS 自定义属性，将“幽灵字符数”映射为 flex-grow 的相对权重值，并将 flex-basis 显式设为 0%，从而确保空间分配严格按比例进行，不受内容宽度干扰。
✅ 正确实现方式
.container {
display: flex;
width: 10em;
}
.item {
flex: var(--char-count, 1); /* 等价于 flex-grow: N; flex-shrink: 1; flex-basis: 0% */
text-align: center;
padding: 0.5rem 1rem;
border: solid black 1px;
}关键点解析：
- flex: var(--char-count, 1) 是 flex-grow、flex-shrink 和 flex-basis 的简写；
- 浏览器会自动将缺失的 flex-shrink 和 flex-basis 补全为默认值（1 和 0%），而 0% 是本方案成败所在：它清除了内容固有宽度的影响，使所有 .item 完全按 flex-grow 比例瓜分剩余空间；
- --char-count 值应为数字（如 "3" 表示幽灵内容 "BCD" 长度），支持内联样式注入，语义明确且可由构建工具/模板引擎预设。
? 实际用例
<div class="container"> <div class="item" data-ghost-content="BCD" style="--char-count: 3">A</div> <div class="item">B</div> <div class="item">C</div> </div>
在此结构中：
立即学习“前端免费学习笔记（深入）”；
- 第一项虽仅含字符 "A"，但因 --char-count: 3，其 flex-grow 被设为 3；
- 后两项未声明 --char-count，回退至 1；
- 总增长权重为 3 + 1 + 1 = 5，因此第一项获得 3/5 = 60% 的可用空间，后两者各占 20%。
? 提示：若某项需完全不参与伸缩（如固定宽度图标区），可设 style="--char-count: 0"，此时 flex: 0 等效于 flex: 0 1 0%，即 flex-grow: 0，符合预期。
⚠️ 注意事项
- ❌ 不要单独使用 flex-grow：它默认以 flex-basis: auto 计算，仍受内容宽度影响，导致结果不可控；
- ✅ 必须依赖 flex 简写或显式声明 flex-basis: 0%，才能解除内容对尺寸的绑定；
- ? var(--char-count, 1) 的 fallback 支持任意合法 CSS 数字（包括 0），适合动态场景；
- ? 兼容性良好：CSS 自定义属性 + Flexbox 在所有现代浏览器（Chrome 49+, Firefox 31+, Safari 9.1+, Edge 16+）中均稳定支持。
该方案轻量、声明式、无 JS 侵入，是实现“内容无关尺寸控制”的优雅实践。
