Search code examples
cssflexboxvertical-alignment

Align items top and bottom inside same container

I have some items inside a container, there're black and red items:

enter image description here

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

I would like to align black items to the top and red items to the bottom in CSS without modifying the HTML code.

Here's a jsfiddle to experiment https://jsfiddle.net/e72c99c0/.

Solution

  • You can use order to group the items, and a margin-bottom:auto to pin one group to the bottom. 

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