如何实现element2居中且element1始终紧邻其旁的CSS布局？

原始布局代码 #

CSS #

.container {
  display: flex;
  background-color: gray;
  color: white;
  align-items: center;
  justify-content: center;
}

.el1 {
  background-color: red;
}

.el2 {
  background-color: blue;
}

HTML #

<div class="container">
  <span class="el1">element 1</span>
  <span class="el2">element 2</span>
</div>

需求 #

让element2在container内居中，无论element2尺寸如何变化，element1始终紧贴在它左侧。之前尝试用position: absolute加auto margin，再手动调整element1的位置，但element2尺寸变化时就得重新调整，想找个无需手动干预的实现方式。

解决方案 #

方法一：嵌套内部容器（最直观） #

把el1和el2放进一个新的子容器，让这个子容器在父容器container中居中，子容器内部用Flex布局让两个元素自然紧贴：

.container {
  display: flex;
  background-color: gray;
  color: white;
  align-items: center;
  justify-content: center;
}

.inner-wrap {
  display: flex;
}

.el1 {
  background-color: red;
}

.el2 {
  background-color: blue;
}

<div class="container">
  <div class="inner-wrap">
    <span class="el1">element 1</span>
    <span class="el2">element 2</span>
  </div>
</div>

整个inner-wrap在父容器中居中，两个元素始终紧贴，无论el2尺寸怎么变化，都不需要手动调整。

方法二：利用负margin（无需额外嵌套） #

不想添加额外容器的话，给el1设置负的margin-right，让它自动贴到el2左侧：

.container {
  display: flex;
  background-color: gray;
  color: white;
  align-items: center;
  justify-content: center;
}

.el1 {
  background-color: red;
  margin-right: -100%; /* 将el1拉至el2左侧 */
}

.el2 {
  background-color: blue;
  position: relative;
  z-index: 1; /* 若担心el1遮挡el2，添加此属性让el2层级更高 */
}

这种方式不用修改HTML结构，el2保持居中状态，el1会自动跟随el2的尺寸变化紧贴左侧。

内容的提问来源于stack exchange，提问作者derstauner