更改一個彈性兒童的位置，而無需手動將「訂單」屬性分配給他人

Question

我有興趣將第一個彈性兒童的訂單與第二個彈性兒童的訂單進行交換。我遇到的問題是我可能會與十幾個或更多的div打交道。有沒有辦法讓我可以分配一個柔性孩子的訂單，而不必將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>

有沒有一種方法，我可以將一個柔性孩子的順序，不必 的順序財產分配給每一個

號，如果你想之間移動一個其他兩個，你不能這樣做，只有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>

Answer 2

更改所有的人都訂購2，只有第二個訂購1：

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

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

 
.child { 
 
    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 3

默認值順序屬性爲0，取決於在HTML代碼中的位置，除非您指定其他元素，否則所有元素都有0個順序。所以，通過第一個和第二個元素之間的交換順序，足夠用：

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