Align Elemente oben und unten innerhalb selben Container

Question

ich einige Elemente in einem Container haben, sind es schwarz und rot Artikel:

<div class="container"> 
    <div class="item black"></div> 
    <div class="item black"></div> 
    <div class="item red"></div> 
    <div class="item red"></div> 
    <div class="item black"></div> 
    <div class="item red"></div> 
</div> 

Ich möchte schwarze Elemente nach oben auszurichten und rote Elemente in CSS nach unten, ohne den HTML-Code zu ändern.

Hier ist ein Experiment https://jsfiddle.net/e72c99c0/.

Answer 1

Sie können die Reihenfolge verwenden, um die Elemente zu gruppieren, und eine margin-bottom:auto, um eine Gruppe nach unten zu setzen.

.container { 
 
    height: 300px; 
 
    width: 40px; 
 
    background: #ddd; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.item { 
 
    width: 40px; 
 
    height: 20px; 
 
    margin-bottom: 1px; 
 
    border: 1px solid #aaa; 
 
} 
 

 
.item.black { 
 
    background: #222; 
 
    
 
} 
 

 
.black:nth-of-type(5) { 
 
    margin-bottom: auto ; 
 
} 
 

 
.item.red { 
 
    background: red; 
 
    order:2; 
 
}

<div class="container"> 
 
    <div class="item black"></div> 
 
    <div class="item black"></div> 
 
    <div class="item red"></div> 
 
    <div class="item red"></div> 
 
    <div class="item black"></div> 
 
    <div class="item red"></div> 
 
</div>