如何使用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>