html - Flexbox 在不改变 HTML 的情况下在上方保留一个元素，在下方保留两个元素

Question

我有像这样的简单 div:

.container {
  width: 20rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  width: 50%;
}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

这使得 child 1 和 child 2 在上方，而 child 3 在下方居中。我的问题是，在不改变 HTML 结构的情况下，有什么方法可以使 child 1 在上方居中，而 child 2 和 child 3 在下方？

Answer 1

您可以使用*-reverse 并更新订单:

.container {
  width: 20rem;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  justify-content: center;
}

.child {
  width: 50%;
  height: 50px;
  background: red;
  color:#fff;
  font-size:20px;
}

.child:nth-last-child(1) {order: 1;}
.child:nth-last-child(2) {order: 2;}
.child:nth-last-child(3) {order: 3;}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>