Flexbox布局对齐内容

Question

在我看来这似乎是一个简单的场景。

我有一个容器div，它有两个子元素，第一个应该出现在左上角，第二个应该显示为死中心。

在容器上使用Flex的space-between属性时，我尝试使用justify-content。

这会将内容分为左上角和右上角。

右上角的元素需要向左拉，直到它处于死角。

我无法想到实现这一目标的方法。

我不想制作第三个隐藏元素，因为这看起来像是黑客。

#container {
  display: flex;
  justify-content: space-between;
}

<div id="container">
  <div>TOP LEFT</div>
  <div>DEAD CENTER</div>
</div>

Answer 1

只需将width: 50%;添加到容器中就可以了

＆＃13;

＆＃13;

#container {
  display: flex;
  justify-content: space-between;
  width: 50%;
}

＆＃13;

<div id="container">
  <div>TOP LEFT</div>
  <div>DEAD CENTER</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您希望第二项完全位于中心添加transform:translateX(50%);，则会根据其宽度移动它

＆＃13;

＆＃13;

#container{
  display:flex;
  justify-content: space-between;
  width: 50%;
}

#container div:nth-child(2){  
  transform:translateX(50%);
}

＆＃13;

<div id="container">
  <div>TOP LEFT</div>
  <div>DEAD CENTER</div>
</div>

＆＃13;

＆＃13;

＆＃13;