使用CSS flexbox放置頂部/開始使用孤立元素的高效方法

當您使用flexbox wrap創建網格並且最後一行的元素少於之前的行時，「孤立」元素的默認行爲flex: 1將水平拉伸以填充寬度 - 使元素大於先前的行。我想要相同的行爲，除了我希望較大的項目出現在頂行而不是底行。使用CSS flexbox放置頂部/開始使用孤立元素的高效方法

我已經想出了一個解決方案（如下所示），但它不能很好地擴展，感覺像一個糟糕的黑客攻擊。有沒有更好的（更優雅）的方式來實現這種佈局？該解決方案需要處理動態內容;即，我不會事先知道元素的數量，我需要維護源排序。

它應該是這樣的：

ul#subcategory_list { 
    list-style-type: none; 
    display: flex; 
    flex-wrap: wrap-reverse; 
    flex-direction: row-reverse; 
} 

ul#subcategory_list li:nth-child(1) {order: 30} 
ul#subcategory_list li:nth-child(2) {order: 29} 
ul#subcategory_list li:nth-child(3) {order: 28} 
ul#subcategory_list li:nth-child(4) {order: 27} 
ul#subcategory_list li:nth-child(5) {order: 26} 
ul#subcategory_list li:nth-child(6) {order: 25} 
ul#subcategory_list li:nth-child(7) {order: 24} 
ul#subcategory_list li:nth-child(8) {order: 23} 
ul#subcategory_list li:nth-child(9) {order: 22} 
ul#subcategory_list li:nth-child(10) {order: 21} 
ul#subcategory_list li:nth-child(11) {order: 20} 
ul#subcategory_list li:nth-child(12) {order: 19} 
ul#subcategory_list li:nth-child(13) {order: 18} 
ul#subcategory_list li:nth-child(14) {order: 17} 
ul#subcategory_list li:nth-child(15) {order: 16} 
ul#subcategory_list li:nth-child(16) {order: 15} 
ul#subcategory_list li:nth-child(17) {order: 14} 
ul#subcategory_list li:nth-child(18) {order: 13} 
ul#subcategory_list li:nth-child(19) {order: 12} 
ul#subcategory_list li:nth-child(20) {order: 11} 
ul#subcategory_list li:nth-child(21) {order: 10} 
ul#subcategory_list li:nth-child(22) {order: 9} 
ul#subcategory_list li:nth-child(23) {order: 8} 
ul#subcategory_list li:nth-child(24) {order: 7} 
ul#subcategory_list li:nth-child(25) {order: 6} 
ul#subcategory_list li:nth-child(26) {order: 5} 
ul#subcategory_list li:nth-child(27) {order: 4} 
ul#subcategory_list li:nth-child(28) {order: 3} 
ul#subcategory_list li:nth-child(29) {order: 2} 
ul#subcategory_list li:nth-child(30) {order: 1}

來源

2017-10-18 SpliFF

假設你想擺脫'第n-child' CSS規則上市，沒有1內襯做到這一點。如果您動態生成項目，您可以在內部添加'order'屬性，如果您事先不知道有多少項目，則可以從一個肯定不會超過的值開始，即1000，然後向下。如果這是一個可行的選擇，我可以將其作爲答案。 – LGSon

將其作爲答案發布。我有權訪問服務器端代，因此內聯代碼是我忽略的一個很好的選擇（不過，較少/ sass不屬於我的部署，因此它們不計數）。你的答案解決了很大的樣式表混亂和可伸縮性問題。 – SpliFF

假設你想擺脫nth-child CSS規則上市，沒有1內襯做到這一點。

如果您動態生成項目，則可以內嵌地添加order屬性，如果您事先不知道有多少項目，則可以從一個肯定不會超過的值開始，即1000，然後去向下。

棧片斷

ul#subcategory_list { 
 
    list-style-type: none; 
 
    display: flex; 
 
    flex-wrap: wrap-reverse; 
 
    flex-direction: row-reverse; 
 
} 
 

 
ul#subcategory_list li { 
 
    flex: 1 1 25%; 
 
    border: 1px solid gray; 
 
    box-sizing: border-box; 
 
}

<ul id="subcategory_list"> 
 
    <li style="order: 1000">1</li> 
 
    <li style="order: 999">2</li> 
 
    <li style="order: 998">3</li> 
 
    <li style="order: 997">4</li> 
 
    <li style="order: 996">5</li> 
 
    <li style="order: 995">6</li> 
 
</ul>

來源

2017-10-18 07:40:26 LGSon

使用CSS flexbox放置頂部/開始使用孤立元素的高效方法

回答

相關問題