有沒有一種簡單的方法來知道包裝的Flexbox中有多少行？

Question

我想彩色條紋各行的多行Flexbox的

.container{ 
    display:flex; 
    flex-flow: row wrap; 
} 

有沒有人發現了一個簡單的方法來確定Flexbox的的行數裏？

我看了看這個問題是沒有實現條帶化，而是「手動」，才能標誌着HTML元素條紋：Zebra striping a flexbox table with wrapping items

我看了看這個問題，它通過編程計算行向完成任務在JavaScript中打破。它計算在容器不同getBoundingClientRect.top數量：zebra striping rows in a flex container with flex-wrap:wrap

我不介意的JS，但不幸的是，這種解決方案還需要留意的頁面佈局和每個包裹項目內的內容方面的變化容器。

有沒有人有解決方案，不需要「手動」監測佈局和內容？

Answer 1

考慮到CSS has no way of knowing when an element wraps，腳本解決方案可能是您最好的選擇，除非每行項目的數量在整個容器中是一致的。然後，您可以將單個項目與CSS nth-child pseudo-classes相匹配，這可能導致顏色編碼的行。