根據彈性兒童數量確定佈局？

有沒有一種方法可以根據特定的孩子金額確定使用css/html的佈局？根據彈性兒童數量確定佈局？

查看下面的佈局示例。

我試圖把它與第n個孩子的工作，但我可能不正確地做這個..

https://codepen.io/brycesnyder/pen/EvBzWq

但我不知道是否有一種方法，使所有元素寬度爲50％，如果超過1，則應堆疊。

/* three items */ 
li:first-child:nth-last-child(3):not(:first-child), 
li:first-child:nth-last-child(3) ~ li { 
    background: green; 
}

編輯：我知道這是可能通過標準的元素，像這樣：https://codepen.io/brycesnyder/pen/GvbbyY我希望能夠用短短UL> LI

來源

2017-09-08 Bryce Snyder

像[這裏]（https：//開頭計算器。 COM /問題/ 39386259 /柔性Flexbox的格）？ – kukkuz

@kukkuz這絕對有幫助！我沒有添加正確的佈局視覺效果，所以對於任何4 +我都希望它保持在正確的位置，但保持跨越該區域..如果這是有道理的 –

所以......這不正是「基於孩子的數量「，但您可以通過將您的柔性方向更改爲列，將寬度設置爲50％，並讓第一個元素具有柔性來實現要查找的佈局; 0 0 100％。您還需要設置1個兒童列表的特殊情況（：first-child：nth-last-child（1））爲寬度100％。

的關鍵CSS最終看起來像這樣：

ul { 
padding:10px 1px; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 200px; 
    list-style-type: none; 
} 

li { 
    outline:1px solid gray; 
    text-align:center; 
    width: 50%; 
    margin: 0; 
    padding: 0; 
    flex: 1 1 auto; 
} 

li:first-child { 
    height: 100%; 
    flex: 0 0 100%; 
} 

/* one item */ 
li:first-child:nth-last-child(1) { 
    width: 100%; 
}

這裏有一個codepen我建立從你的叉：

https://codepen.io/kball/pen/yomyyg

來源

2017-09-08 21:14:56 kball

根據彈性兒童數量確定佈局？

回答

相關問題