将项目顶部和底部对齐在同一容器内

Question

我在容器内有一些物品，有黑色和红色物品：

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

我想将黑色项目与CSS中的顶部和红色项目对齐，而不修改HTML代码。

这是一个试验https://jsfiddle.net/e72c99c0/的方法。

Answer 1

您可以使用顺序对项目进行分组，并使用margin-bottom:auto将一个组固定到底部。

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