用最简单的方法将一个项目居中，另一个项目对齐到右边

Question

我有一个有两个元素的容器。我希望其中一个是水平居中，而另一个是对齐，右/推到容器的右侧。

我尝试使用FlexBox并为应该是居中的元素设置margin: auto;，但这使得它的左右边距完全相等，这意味着由于第二个元素占用了一些空间，它不是完全中心的(参见代码段)。

​

#container {
  display: flex;
  width: 250px;
  background-color: #2c3e50;
}

#element-1, #element-2 {
  width: 50px;
  height: 50px;
  background-color: #16a085;
}

#element-1 {
  margin: auto;
}

<div id="container">
  <div id="element-1"></div>
  <div id="element-2"></div>
</div>

​

Answer 1

这条路？

​

#container {
  width      : 250px;
  height     : 50px;
  background : darkblue;
  position   : relative;
  }
#element-1,
#element-2 {
  width      : 50px;
  height     : 50px;
  background : darkgreen;
  position   : absolute;
  top        : 0;
  }
#element-1 {
  right     : 50%;
  transform : translate(50%, 0);
  }
#element-2 {
  right     : 0;
  }

<div id="container">
  <div id="element-1"></div>
  <div id="element-2"></div>
</div>

​