Positionieren von Elementen mit Flex

Question

Wie könnte es möglich sein, Flex css zu verwenden, um die Elemente wie folgt zu belassen?

Answer 1

Sie können margin-left: auto auf dem zweiten Element verwenden, und das wird zweite und dritte Element nach rechts schieben.

.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

Sie könnten auch dies erreichen mit margin-right: auto auf dem ersten Element. In diesem Fall ist die horizontale Ausrichtung das Flex-Ende und nur das erste div ist Flex-Start. Aus diesem Grund können Sie das erste div mit margin-right: auto nach links schieben und die anderen behalten die Flex-End-Ausrichtung bei. So wird jedes zusätzliche div auch auf der rechten Seite positioniert.

#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>