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

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>

我想在不修改 HTML 代码的情况下，在 CSS 中将黑色项对齐顶部，红色项对齐底部。

这是一个用于实验的 jsfiddle https://jsfiddle.net/e72c99c0/。

Answer 1

您可以使用 order 对项目进行分组，并使用 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>