绝对定位会改变 Flex 容器的默认宽度计算方式：脱离文档流后，其宽度不再自动撑满父容器，而是收缩为内容宽度，导致 justify-content: space-between 无法按预期分布子项。需显式设置宽度（如 left: 0; right: 0 或 width: 100%）才能恢复弹性布局的正常行为。
绝对定位会改变 flex 容器的默认宽度计算方式：脱离文档流后，其宽度不再自动撑满父容器，而是收缩为内容宽度，导致 `justify-content: space-between` 无法按预期分布子项。需显式设置宽度（如 `left: 0; right: 0` 或 `width: 100%`）才能恢复弹性布局的正常行为。
在 CSS 布局中，Flexbox 的行为高度依赖于其包含块（containing block） 和尺寸计算规则。当一个元素设置为 position: absolute 时，它将脱离常规文档流，并基于最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先）进行定位。更重要的是：绝对定位元素的默认宽度不再继承父容器的可用宽度，而是收缩为内容宽度（shrink-to-fit）——这与普通块级元素（如未定位的
因此，即使你为 .container 设置了 display: flex 和 justify-content: space-between，若未显式指定其宽度，浏览器会先按绝对定位规则计算其宽度（即包裹内部文本“hello”和“hi”的最小宽度），再在此窄小区域内分配子项——自然无法实现两端对齐效果。
✅ 正确做法是主动定义容器的水平尺寸。以下是两种推荐方案：
方案一：使用 left + right 实现自适应宽度（推荐）
.container {
position: absolute;
top: 0;
left: 0;
right: 0; /* 等效于 width: 100%，但更健壮（自动适配滚动条、边框等） */
display: flex;
justify-content: space-between;
}该写法明确声明容器应从左侧边界延伸至右侧边界，从而获得完整的可用宽度，space-between 即可正常生效。
方案二：显式设置 width
.container {
position: absolute;
top: 0;
left: 0;
width: 100%; /* 注意：此值相对于包含块宽度，非视口 */
display: flex;
justify-content: space-between;
}⚠️ 注意：width: 100% 的参考基准是其包含块的宽度。若包含块本身未设置宽度（如 body 未设宽），可能仍导致意外结果；而 left: 0; right: 0 更可靠，尤其在响应式或含内边距/边框的场景下。
? 关键总结：
- Flex 容器的 justify-content 依赖容器自身的可用宽度，而非子项数量或内容；
- 绝对定位会重置宽度计算逻辑，必须显式控制尺寸；
- 优先使用 left: 0; right: 0 而非 width: 100%，兼顾语义清晰性与布局鲁棒性；
- 若需垂直居中，可补充 top: 50%; transform: translateY(-50%)，但注意此时需确保包含块有明确高度。
掌握这一机制，能避免大量因定位与 Flex 混用导致的布局“失效”问题，让响应式布局更可控、可预测。
