CSS Flexbox rechts ausrichten resonsive

Question

Es gibt ein CSS Flexbox Problem, das ich versuche zu lösen: richtige Ausrichtung der Boxen.

Also .. Ich habe 4 divs in Reihe. Zwei davon müssen links ausgerichtet werden und der Rest muss auf der rechten Seite sein. Ich weiß, wie man das macht und das ist kein Problem (margin-left: auto auf 3.).

Aber sie haben Eigenschaft flex-wrap: wrap, weil ich möchte, dass sie auf kleinen Bildschirmen wickeln. Ich möchte, dass das dritte und vierte Div auf jeder Bildschirmgröße auf der rechten Seite sind. Ich kann margin-left: auto auf 4. hinzufügen und es wird unerwünschter Platz zwischen 3. und 4. Div schaffen, aber es funktioniert für kleinen Bildschirm (3. und 4. bleibt auf der rechten Seite).

Ich will nicht Medienanfragen verwenden, da divs Breite dynamisch ...

Gibt es eine schöne Lösung für das? Ich möchte hier keine Flexbox geben!

Hier ist codepen: http://codepen.io/djkantoci/pen/XNxLVK

Rot mit margin-left: auto ist, blau ist ohne:

Answer 1

Hier hinzugefügt justify-content: flex-end und margin-right: auto Element .f2:

.flex { 
 
    align-items: center; 
 
    background: #ddd; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    flex-wrap: wrap; 
 
    margin-bottom: 20px; 
 
    padding: 5px; 
 
} 
 
.flex.small { 
 
    width: 500px; 
 
} 
 

 
.f { 
 
    background: #333; 
 
    color: #fff; 
 
    flex: 0 0 auto; 
 
    margin: 5px; 
 
    min-height: 40px; 
 
    padding: 30px 50px; 
 
    text-align: center 
 
} 
 
.f2 { 
 
    margin-right: auto 
 
} 
 
.f3 { 
 
    flex-basis: 300px; 
 
}

<div class="flex"> 
 
    <div class="f f1">1</div> 
 
    <div class="f f2">2</div> 
 
    <div class="f f3">3</div> 
 
    <div class="f f4">4</div> 
 
</div> 
 

 
<div class="flex small"> 
 
    <div class="f f1">1</div> 
 
    <div class="f f2">2</div> 
 
    <div class="f f3">3</div> 
 
    <div class="f f4">4</div> 
 
</div>

OK?