Moyen efficace de placer les éléments orphelins en haut/début en utilisant CSS flexbox

Question

Lorsque vous utilisez flexbox wrap pour créer une grille et que vous avez une dernière ligne avec moins d'éléments que les lignes précédentes, le comportement par défaut des éléments "orphelins" avec flex: 1 est d'étirer horizontalement pour remplir la largeur - rendant les éléments plus grands que les rangées précédentes. Je veux le même comportement sauf que je veux que les plus gros objets apparaissent dans la rangée du haut plutôt que dans la rangée du bas.

Je suis venu avec une solution (montrée ci-dessous) mais elle ne se met pas bien à l'échelle et il se sent comme un mauvais hack. Y a-t-il un meilleur moyen (plus élégant) d'obtenir cette disposition? La solution doit gérer le contenu dynamique. c'est-à-dire que je ne connaîtrai pas le nombre d'éléments à l'avance et que je dois maintenir l'ordre des sources.

Il devrait ressembler à ceci:

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} 

Answer 1

En supposant que vous voulez vous débarrasser de la liste des règles nth-child CSS, il n'y a pas 1-liner qui fait cela.

Si vous générez les éléments de façon dynamique, vous pouvez ajouter la propriété order à la ligne, et si vous ne savez pas à l'avance combien d'éléments, vous pouvez partir d'une valeur que vous ne pouvez jamais dépasser, par exemple 1000 et ensuite vers le bas.

Stack snippet

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>