使用'order'屬性在兄弟姐妹之間定位彈性項目

Question

我有一個帶有一到三個柔性物品的柔性盒子。

在包含的flex框中，正確的布局應該類似於<div></div><h2></h2><div></div> 。

只有在布局順序保持不變的情況下，我才能使代碼完成此工作（請參閱此內容 ）。

我的問題是：如果有一種方法可以確定，如果標記並不總是按順序排列（假設我的一個同事未能正確執行），我該如何設置它以便<h2>始終得到顯示在中間（或在只有一個div和一個h2的情況下盡可能接近）。

為了實現這一點，我一直在使用order屬性; 但是，我要么沒有充分利用它，要么是錯誤的解決方案。

我把這個 jsfiddle作為它的試驗場，但也有這個樣本：

.diff-order {
  order: 2
}
.diff-order:not(h2) {
  order: 1;
}

 .container { display: flex; } .container > * { flex: 1; /* KEY RULE */ border: 1px dashed red; } h2 { text-align: center; margin: 0; } .container > div { display: flex; } .diff-order { order: 2 } .diff-order:not(h2) { order: 1; } p { text-align: center;} p > span { background-color: aqua; padding: 5px; } 

 <div class="container"> <h2> I'm an h2 </h2> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <div> <span>I'm a span</span> <span>I'm a span</span> </div> </div> <div class="container"> <h2 class="diff-order"> I'm an h2 </h2> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> </div> 

它完成的是它將<h2>移動到包含div的末尾。 我試圖看看是否有辦法設置順序，以便<h2>始終是中心項目。 也許偽類:before和:after可以被利用（也許作為h2周圍div的替代......）。

謝謝。

Answer 1

當容器中有三個元素時：

• DIV
• h2
• DIV

和

• 這些元素的順序在源頭上有所不同......

和

• 你希望h2始終處於中間......

那么，你可以這樣做：

.container > div:first-of-type { order: 1; }
.container > h2 { order: 2; }
.container > div:last-of-type { order: 3; }

這意味着：

無論源中元素的順序如何，

• 第一個div將首先出現在視覺順序中
• h2將在視覺順序中排在第二位
• 第二個div將以視覺順序出現在最后

 .container { display: flex; } .container > * { flex: 1; border: 1px dashed red; } h2 { text-align: center; margin: 0; } .container > div:first-of-type { order: 1; } .container > h2 { order: 2; } .container > div:last-of-type { order: 3; } p { text-align: center;} p > span { background-color: aqua; padding: 5px; } 

 <div class="container"> <div> </div> <h2>I'm an h2</h2> <div> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> </div> </div> <div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> </div> <h2>I'm an h2</h2> <div> <span>I'm span 4</span> <span>I'm span 5</span> <span>I'm span 6</span> </div> </div> <div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> </div> <h2>I'm an h2</h2> <div> <span>I'm span 3</span> </div> </div> <div class="container"> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <div> </div> <h2> I'm an h2 </h2> </div> <div class="container"> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <h2> I'm an h2 </h2> </div> <div class="container"> <h2 class="diff-order"> I'm an h2 </h2> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> </div> <p><span>TRUE CENTER</span></p> 

---

對於容器中有一個元素的情況，添加justify-content: space-around 。

因為每個項目已經應用了flex: 1 ，所以當容器中有兩個或更多項目時， space-around將無效。

但是，當只有一個項目時， space-around解析為center 。

從規格：

8.2。 Axis Alignment： justify-content屬性

justify-content屬性沿着flex容器的當前行的主軸對齊flex項。

space-around

Flex項目均勻分布在行中，兩端各有一半的空格。

如果剩余的自由空間為負數或者線上只有一個彈性項，則該值與center相同。

 .container { display: flex; justify-content: space-around; /* NEW */ } .container > * { flex: 1; border: 1px dashed red; } h2 { text-align: center; margin: 0; } .container > div:first-of-type { order: 1; } .container > h2 { order: 2; } .container > div:last-of-type { order: 3; } p { text-align: center;} p > span { background-color: aqua; padding: 5px; } 

 <div class="container"> <div> </div> <h2>I'm an h2</h2> <div> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> </div> </div> <div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> </div> <h2>I'm an h2</h2> <div> <span>I'm span 4</span> <span>I'm span 5</span> <span>I'm span 6</span> </div> </div> <div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> </div> <h2>I'm an h2</h2> <div> <span>I'm span 3</span> </div> </div> <div class="container"> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <div> </div> <h2> I'm an h2 </h2> </div> <div class="container"> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <h2> I'm an h2 </h2> </div> <div class="container"> <h2 class="diff-order"> I'm an h2 </h2> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> </div> <div class="container"> <h2 class="diff-order"> I'm an h2 </h2> </div> <p><span>TRUE CENTER</span></p> 

您現在可以使用一個和三個彈性項目。

對於兩個項目，它有點棘手。

由於你總是希望h2居中，我建議在容器中始終有兩個div，即使它們是空的。 然后flex: 1將使所有三個項目的寬度相等。

 .container { display: flex; justify-content: space-around; } .container > * { flex: 1; border: 1px dashed red; } h2 { text-align: center; margin: 0; } .container > div:first-of-type { order: 1; } .container > h2 { order: 2; } .container > div:last-of-type { order: 3; } p { text-align: center;} p > span { background-color: aqua; padding: 5px; } 

 <div class="container"> <div> </div> <h2>I'm an h2</h2> <div> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> </div> </div> <div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> </div> <h2>I'm an h2</h2> <div> <span>I'm span 4</span> <span>I'm span 5</span> <span>I'm span 6</span> </div> </div> <div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> </div> <h2>I'm an h2</h2> <div> <span>I'm span 3</span> </div> </div> <div class="container"> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <div> </div> <h2> I'm an h2 </h2> </div> <div class="container"> <div></div> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <h2> I'm an h2 </h2> </div> <div class="container"> <h2 class="diff-order"> I'm an h2 </h2> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> </div> <p><span>TRUE CENTER</span> </p>