フレックスアイテムを右に整える

Question

私はコンテナを持っています。その内部には、黄色、緑色、赤色の3つのボックスがあります。

私は容器にdisplay:flexを与え、最初に項目を開始するにはjustify-content:flex-startを与えました。

私はmargin-right: autoを黄色のボックスに付けて、赤いボックスが最後に移動できるように、赤いボックスを最後まで移動したいと思います。私もそれで助けが必要です）。

そこで質問です：私は、コンテナの垂直真ん中に緑色のボックスをしたいと私は赤い箱のような極端な右に移動します（ただし、コンテナの真ん中にする必要があります）

フレックスボックスでどうすればいいですか？

.container { 
 
    height: 500px; 
 
    width: 500px; 
 
    background-color: royalblue; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: flex-start; 
 
} 
 
.yellowbox { 
 
    color: black; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: yellow; 
 
    margin-right: auto; 
 
} 
 
.greenbox { 
 
    color: black; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: green; 
 
    align-self: center; 
 
    margin-left: auto; 
 
} 
 
.redbox { 
 
    color: black; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <div class="yellowbox"> 
 
    <p>the white text</p> 
 
    </div> 
 
    <div class="greenbox"> 
 
    <p>the black text</p> 
 
    </div> 
 
    <div class="redbox"> 
 
    <p>the red text</p> 
 
    </div> 
 
</div>

これは私のCODEPENリンクです：http://codepen.io/ShamZ/pen/pRLELP

Answer 1

あなたがmargin Sの一部を増やすかもしれませんが、あなたはwrapにflex子供を許可する必要があります。そして最後の位置に緑色のボックスを置くためにorderを使用

.container { 
 
    height: 500px; 
 
    width: 500px; 
 
    background-image:linear-gradient(to left,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%),linear-gradient(to top,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%); 
 
    background-color: royalblue; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap:wrap; 
 
    justify-content:space-between; 
 
} 
 
.yellowbox { 
 
    color: black; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: yellow; 
 
    margin-right: 50%; 
 
} 
 
.greenbox { 
 
    order:1; 
 
    color: black; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: green; 
 
    margin: -100px 0 auto auto; 
 
} 
 
.redbox { 
 
    margin:0 0 0 auto; 
 
    color: black; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <div class="yellowbox"> 
 
    <p>the white text</p> 
 
    </div> 
 
    <div class="greenbox"> 
 
    <p>the black text</p> 
 
    </div> 
 
    <div class="redbox"> 
 
    <p>the red text</p> 
 
    </div> 
 
</div>

http://codepen.io/gc-nomade/pen/Qdmpbb