css - 更改一个 flex child 的位置，而无需手动将 "order"属性分配给其他人

Question

我有兴趣将我的第一个 flex child 的顺序与第二个交换。我的问题是我可能会处理十几个或更多的 div。有没有办法可以分配 的顺序一 flex child 无需分配 order每个人的属性(property)？否则第一个 div 会被推到底部。

.container {
  display: flex;
  flex-direction: column;
}

.child:first-of-type {
  order: 2;
}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

Answer 1

I was interested swapping the order of my first flex child with the second.

给第二个 order: -1

.container {
  display: flex;
  flex-direction: column;
}

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

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

Is there a way I can assign the order of one flex child without having to assigning the order property to each one

不，如果你想在两个之间移动一个，你不能只用 1 条规则来做到这一点，你需要 2

.container {
  display: flex;
  flex-direction: column;
}

.child:nth-child(n+8) {
  order: 2;
}
.child:nth-child(5) {
  order: 1;
}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>