フレックスボックス：そのコンテナの右端に要素を貼り付けるにはどうすればいいですか？

Question

私の意図は、1つの大きな正方形とそれの中に2つの小さな正方形を持つことでした。

大きな正方形の左端に1つの正方形（左下）が貼り付けられ、右端にもう1つ（小右）が貼り付けられるはずです。

これは私が得るものです：あなたは右に、右の小さな正方形のスティックを作ることができるもの

知っていますか？

私が書いたコードを見てください：

.big { 
 
    display: flex; 
 
    width: 40vw; 
 
    height: 10vw; 
 
    border: solid; 
 
    flex-direction: row; 
 
} 
 

 
.small-right, 
 
.small-left { 
 
    width: 5vw; 
 
    height: 5vw; 
 
    border: solid; 
 
} 
 

 
.small-right { 
 
    align-items: flex-end; 
 
}

<div class="big"> 
 
    <div class="small-left"></div> 
 
    <div class="small-right"></div> 
 
</div>

あなたはまた、コード・ペンのコードを見ることができます：あなたは多くのオプションを持っているhttps://codepen.io/CrazySynthax/pen/OmMxQw

Answer 1

。ここでは3されています

• フレックスコンテナにjustify-content: space-betweenを追加したり、
• が最初フレックス項目にmargin-right: autoを追加したり、
• は、第二のフレックス項目にmargin-left: autoを追加します。ここで

は、各プロパティがどのように機能するかの説明です：

• Methods for Aligning Flex Items along the Main Axis

Answer 2

を使用できマージン：

.big { 
 
    display: flex; 
 
    width: 40vw; 
 
    height: 10vw; 
 
    border: solid; 
 
    flex-direction: row; 
 
} 
 

 
.small-right, 
 
.small-left { 
 
    width: 5vw; 
 
    height: 5vw; 
 
    border: solid; 
 
} 
 

 
.small-right { 
 
    margin-top: auto; 
 
    margin-left: auto; 
 
}

<div class="big"> 
 
    <div class="small-left"></div> 
 
    <div class="small-right"></div> 
 
</div>

https://codepen.io/gc-nomade/pen/zwrEXo

Answer 3

この

が正当化コンテンツをを追加してみてくださいスペースの間メインのdivにします。 Remove-- margin-top：auto;小右クラスからの。

<div class="big"> 
     <div class="small-left"></div> 
     <div class="small-right"></div> 
    </div> 



    .big { 
     display: flex; 
     width: 40vw; 
     height: 10vw; 
     border: solid; 
     justify-content: space-between; 
    } 

    .small-right, 
    .small-left { 
     width: 5vw; 
     height: 5vw; 
     border: solid; 
    }