Flexbox: Eine Möglichkeit, einzelne Elemente entlang der Hauptachse auszurichten

Question

Ich habe mich gefragt, ob es eine Möglichkeit gibt, die Ausrichtung entlang der Hauptachse für einzelne Elemente außer Kraft zu setzen. Etwas wie folgt aus:

Im Bild oben, alle Elemente haben align-items: flex-start, mit Ausnahme der letzten, die als flex-end ausgerichtet werden muss, oder space-around.

Es gibt eine Option zum Überschreiben entlang der Querachse: align-self, aber wahrscheinlich nicht entlang der Hauptachse.

Was ist schlecht mit dies mit position: absolute zu tun: die anderen Elemente sollten dieses spezielle respektieren, und nicht mit ihm überlappen.

Was ist schlecht mit float ist, dass es nur für flex-direction: row funktioniert.

Answer 1

Sie können ein Pseudo-Element verwenden, das auf flex-grow: 1 gesetzt ist, und es so bestellen, dass es den gewünschten Platz zwischen den Elementen füllt.

.flex { 
 
    display: flex; 
 
    height: 100px; 
 
    counter-reset: counter; 
 
} 
 
.flex:before { 
 
    content: ''; 
 
    flex: 1 1 auto; 
 
    order: 1; 
 
} 
 
.flex div { 
 
    flex: 0 1 100px; 
 
    background-color: blue; 
 
    margin: 0 1%; 
 
} 
 
.flex div:before { 
 
    counter-increment: counter; 
 
    content: counter(counter); 
 
    color: white; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    display: block; 
 
    font-size: 48px; 
 
    font-family: sans-serif; 
 
} 
 
.flex div:last-child { 
 
    order: 2; 
 
    flex-basis: 50px; 
 
}

<div class="flex"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Answer 2

Setzen Sie einfach margin-left für das 4. Element auf "auto". Wenn Sie Elemente entlang der Hauptachse ausrichten, sind die automatischen Ränder der richtige Weg.