本文介绍一种利用 css 自定义属性与 flexbox 的 `flex` 简写特性，使容器按预设字符数（而非实际可见内容）分配宽度的纯 css 方案，适用于响应式布局中需统一视觉权重但内容长度不一的场景。
在 Flexbox 布局中，元素默认依据其实际渲染内容的尺寸（如文本宽度、内边距、边框等）参与空间分配。但有时我们需要打破这一限制——例如，让一个仅显示单字符 "A" 的 .item 占据与显示 "BCD" 时相同的宽度，以保持视觉均衡或对齐一致性。此时，“幽灵内容”（ghost content）并非真实渲染的 DOM 节点，而是一种逻辑上的尺寸锚点：我们不显示它，却要让它影响布局。
核心思路是用字符数量作为相对权重的代理。由于纯 CSS 无法直接读取 data-ghost-content 属性值并计算长度，因此需借助外部手段（如构建时预处理或 JS 注入）将幽灵内容长度转化为 CSS 自定义属性，再由 Flexbox 消费：
.container {
display: flex;
width: 10em;
}
.item {
/* 关键：使用 flex 简写，而非单独设置 flex-grow */
flex: var(--char-count, 1); /* 等价于 flex: */
text-align: center;
padding: 0.5rem 1rem;
border: solid black 1px;
} ✅ 正确用法：flex: var(--char-count, 1) ❌ 错误用法：flex-grow: var(--char-count, 1)（会忽略 flex-basis 默认值，导致基线非零，破坏比例逻辑）
为什么必须用 flex 而非 flex-grow？因为 flex-grow 仅控制剩余空间的分配比例，而 flex-basis（基础尺寸）仍为 auto（即按内容宽），这会使短内容项实际宽度远小于预期。而 flex: N 是 flex: N 1 0% 的简写——其中 flex-basis: 0% 强制所有项目从零宽度开始，再严格按 flex-grow 数值比例瓜分可用空间。这样，--char-count: 3 的项将获得三倍于 --char-count: 1 项的空间，完全脱离实际内容宽度干扰。
示例 HTML 中：
ABC
第一个 .item 将占据容器总宽的 3 / (3+1+1) = 60%，其余两项各占 20%，实现“按幽灵内容长度加权”的精准布局。
⚠️ 注意事项：
- 自定义属性 --char-count 需由构建工具（如 PostCSS 插件）、服务端模板或轻量 JS（如 el.style.setProperty('--char-count', el.dataset.ghostContent.length)）注入，CSS 本身无法读取 data-* 属性；
- 若某元素未设置 --char-count，回退值 1 保证其参与默认均分；也可设为 0（var(--char-count, 0)）使其不伸缩，保留内容固有宽度；
- 此方案适用于字符数与视觉权重强相关的场景（如单字按钮、缩写标签），若需精确到像素级宽度匹配（如等宽字体排版），建议结合 ch 单位或 font-chars 等进阶方案。
总结：通过 flex: var(--char-count, N) + flex-basis: 0% 的组合，我们绕开了内容驱动的布局惯性，用声明式 CSS 实现了“幽灵内容驱动尺寸”的优雅解法——简洁、高效，且完全兼容现代浏览器 Flexbox 规范。
