更改一个flex子项的位置,而无需手动将"order"属性分配给其他人

Question

我有兴趣用第二个交换第一个弹性孩子的顺序.我遇到的问题是我可能会处理十几个或更多的div.有没有办法我可以分配一个 flex子的顺序而不必order为每个子分配属性？否则第一个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

我有兴趣用第二个交换第一个弹性孩子的顺序.

给第二个 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>

有没有办法我可以分配一个flex子的顺序,而不必为每个子分配订单属性

不,如果你想在另外两个之间移动一个,你只能用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>