本文介绍一种不依赖固定尺寸、能自适应元素2宽度变化的 CSS 布局方案：通过嵌套容器 + position: absolute 配合相对定位 wrapper，使元素2自然居中，元素1始终紧贴其左侧，且无需手动调整偏移量。
本文介绍一种不依赖固定尺寸、能自适应元素2宽度变化的 css 布局方案：通过嵌套容器 + `position: absolute` 配合相对定位 wrapper，使元素2自然居中，元素1始终紧贴其左侧，且无需手动调整偏移量。
在 Flexbox 布局中，若希望一个元素（如 .el2）严格居中于容器，而另一个元素（如 .el1）动态紧邻其左侧（即无论 .el2 内容多宽，.el1 始终无缝贴靠在其左边缘），直接使用 justify-content: center 会导致两个子元素整体居中，无法满足“一个锚定居中、另一个依附其位置”的需求。
标准解法是分离定位职责：
- 将 .el2 放入一个独立的、具有 position: relative 的包装容器（.wrapper）中；
- 让 .wrapper 在 flex 容器中居中（justify-content: center 自然生效）；
- 将 .el1 设置为 position: absolute，并利用 right: 100% 实现“紧贴 .wrapper 左侧”的效果——这正是关键所在：right: 100% 表示元素右边缘与父容器（即 .wrapper）左边缘对齐，从而天然实现“左邻”关系，且完全不依赖 .el2 的实际宽度。
以下是完整可运行的实现代码：
<div class="container">
<div class="wrapper">
<span class="el1">element 1</span>
<span class="el2">element 2</span>
</div>
</div>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: #888;
color: white;
padding: 1rem;
min-height: 100vh;
}
.wrapper {
position: relative; /* 为绝对定位提供参考上下文 */
}
.el1 {
position: absolute;
right: 100%; /* 关键：右边缘对齐 .wrapper 左边缘 */
background-color: #e53e3e;
padding: 0.5rem 1rem;
margin-right: 0.5rem; /* 可选：添加间距 */
}
.el2 {
background-color: #3182ce;
padding: 0.5rem 1rem;
}
</style>
✅ 优势说明：
- .el2 宽度自由变化（如文本增减、字体缩放、响应式内容）时，.el1 始终自动对齐其左边界，无需 JS 或媒体查询干预；
- 不破坏文档流主结构，.wrapper 仍参与 flex 居中计算；
- 兼容所有现代浏览器（包括 Safari 12.1+、Chrome 49+、Firefox 47+）。
⚠️ 注意事项：
- 确保 .wrapper 是 .el1 的最近定位祖先（即 position: relative），否则 right: 100% 会相对于 或更外层定位元素计算，导致错位；
- 若需支持 .el1 换行或复杂内容，建议为其设置 white-space: nowrap 或 min-width 防止意外折行影响布局；
- 如需右侧也放置类似元素（如 .el3 紧邻 .el2 右侧），可对称添加 position: absolute; left: 100% 并置于 .wrapper 内。
这种“相对定位 wrapper + 绝对定位兄弟”的模式，是解决 Flexbox 中“局部锚定+全局居中”混合需求的经典范式，兼顾语义清晰性与样式健壮性。
