如何使用flex定位元素

Question

如何使用Flex css保留元素如下？

Answer 1

你可以在第二个元素上使用--device-link，这会将第二个和第三个元素推向右边。

margin-left: auto

.content {
  display: flex;
}
.content > div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}
.content > div:nth-child(2) {
  margin-left: auto;
}

Answer 2

您也可以在第一个元素上使用margin-right: auto来实现此目的。在这种情况下，主水平对齐是flex-end，只有第一个div是flex-start。因此，您可以向左推动margin-right: auto的第一个div，其他的将保持flex-end对齐。因此，每个额外的div也将位于右侧。

#wrapper{
  background: #eee;
  display: flex;
  justify-content: flex-end;
}

.box{
  width: 100px;
  height: 100px;
  background: #000;
}

.box:nth-child(1){
  background: rgba(0,255,0,0.3);
  margin-right: auto;
}

.box:nth-child(2){
  background: rgba(0,0,255,0.3);
}

.box:nth-child(3){
  background: rgba(255,0,255,0.3);
}

<div id="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>