使用CSS在不同位置垂直对齐多个堆叠项

Question

我尝试过使用CSS Grid和CSS Flex来实现它，但无法完全实现。

要求：

我有一个容器，其中我有多个项目，每个项目有一个配置的顶部，中心和底部垂直对齐。所有最上面的项目应该出现在顶部，所有的中心项目在中心，所有的底部项目出现在父项目的底部。

项目是动态的，可以有任意数量的项目，每个项目可以有任何位置(顶部，中心，底部)。

给用户的唯一限制是，他们将按顺序添加项目，这意味着第一，他将添加顶级项目，然后是中心项目，然后是底部项目。

​

​

​

<div class="parent">
    <div class="child top"> Item 1</div>
    <div class="child top"> Item 2</div>
    <div class="child center"> Item 3</div>
    <div class="child center">Item 4</div>
    <div class="child bottom"> Item 5</div>
    <div class="child bottom"> Item 6</div>
  </div>
</div>

​

Answer 1

您可以使用order和伪元素来完成这一任务。诀窍是，这两个伪元素将在顶部/中心和底部/中心之间，并将填补所有的空间。您也可以对元素进行置乱，HTML顺序并不重要：

​

.parent {
  height:500px;
  border:2px solid;
  display:flex;
  flex-direction:column;
}
.parent > * {
  padding:10px;
  background:red;
  color:#fff;
  text-align:center;
}

.top { order:1}
.parent:before {
  content:"";
  order:2;
  flex:1
}
.center { order:3}
.parent:after {
  content:"";
  order:4;
  flex:1
}
.bottom { order:5}

<div class="parent">
    <div class="child center"> Item 3</div>
    <div class="child top"> Item 1</div>
    <div class="child center">Item 4</div>
    <div class="child bottom"> Item 5</div>
    <div class="child bottom"> Item 6</div>
    <div class="child top"> Item 2</div>
    <div class="child bottom"> Item 7</div>
    <div class="child top"> Item 8</div>
</div>

​

另外一个想法是考虑+选择器和自动边距，因为您说过订单将得到尊重：

​

.parent {
  height:500px;
  border:2px solid;
  display:flex;
  flex-direction:column;
}
.parent > * {
  padding:10px;
  background:red;
  color:#fff;
  text-align:center;
}

.top + .center {
  margin-top:auto;
}

.center + .bottom {
  margin-top:auto;
}

<div class="parent">
    <div class="child top"> Item 1</div>
    <div class="child top"> Item 2</div>
    <div class="child center"> Item 3</div>
    <div class="child center">Item 4</div>
    <div class="child bottom"> Item 5</div>
    <div class="child bottom"> Item 6</div>
</div>

​