Flex-Elemente auf der rechten Seite ausrichten

Question

Ich habe einen Container und im Inneren gibt es 3 Boxen: gelb, grün und rot.

Ich gab display:flex in den Container und gab justify-content:flex-start für die Elemente an Anfang zu starten.

Ich wollte die rote Box bis zum Ende verschieben, also gab ich margin-right: auto an die gelbe Box, so dass die rote Box zum Ende bewegen konnte (nicht sicher, ob dies die genaue Art ist, die rote Box zu Ende zu bewegen, wenn nicht Ich will auch Hilfe darin).

Die Frage ist also: ich das grüne Feld in der vertikalen Mitte des Behälters will und ich mag es ganz rechts wie die rote Box bewegen (aber in der Mitte des Behälters sein soll)

Wie mache ich das mit der Flexbox?

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

THIS IS MY CODEPEN LINK: http://codepen.io/ShamZ/pen/pRLELP

Answer 1

Sie einige der margin s erhöhen können, aber Sie müssen die flex Kinder wrap ermöglichen. und verwenden order das grüne Feld in der letzten Position zu setzen

.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