CSSを使用して冒頭に孤立した要素を配置する効率的な方法flexbox

Question

フレックスボックスラップを使用してグリッドを作成し、前の行よりも要素の少ない最後の行を使用すると、 flex: 1は、幅を埋めるように水平に伸び、要素を前の行よりも大きくします。私は大きな項目を一番下の行ではなく一番上の行に表示することを除いて、同じ動作が必要です。

私は解決策を考え出しました（下記参照）が、うまく拡張できず、ハックのように感じます。このレイアウトを実現するにはより良い（よりエレガントな）方法がありますか？ソリューションは動的コンテンツを処理する必要があります。つまり、私は要素の数を事前に知らないので、ソースの順序を維持する必要があります。

それは次のようになります。あなたはnth-child CSSルールのリストを取り除きたいと仮定すると、

​​

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

、それをして何の1-ライナーはありません。

項目を動的に生成する場合は、orderプロパティをインラインで追加することができます。また、項目の数が分からない場合は、絶対に超えない値下方に

スタックを使用すると、 `n番目-child` CSSルールのリストを取り除きたいと仮定すると、

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>