如何使用flex定位元素

Question

如何使用Flex CSS离开元素如下？

Answer 1

您可以第二个元素上使用margin-left: auto并且将推动第二和第三元素的权利。

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

<div class="content"> 
 
    <div class="box">1</div> 
 
    <div class="box">2</div> 
 
    <div class="box">3</div> 
 
</div>

Answer 2

你也可以用margin-right: auto的第一个元素上实现这一目标。在这种情况下，主要的水平对齐是flex-end，只有第一个div是flex-start。因此，您可以将第一个div与margin-right: auto推到左侧，其他人将保持柔性端对齐。所以每个额外的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>