フレックスで要素を配置する方法

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でこれを達成することができました。この場合、主水平アラインメントはフレックスエンドで、最初のdivのみがフレックススタートです。そのため、margin-right: autoの最初のdivを左にプッシュし、他のdivはフレックスエンドのアライメントを維持します。したがって、すべての追加の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>