Flexbox目標包裝物品

我想定位包裝物品的Flex項目（隨機物品數量），以便我可以從每行最後一個未包裝物品或每行第一個包裝物品中刪除邊框。我想使用CSS僞選擇器，比如我製作的「last-flexitem-in-row」，這樣在這種情況下右邊框就不會出現。我知道我可以使用JS來做到這一點，但它似乎並不理想，而且非常沉重，不得不這樣做。想象一下，在瀏覽器調整大小的過程中，容器寬度會縮小，計算量會非常大。Flexbox目標包裝物品

任何想法？

.flexcontainer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flexcontainer li { 
 
    border-right: 3px solid #c00; 
 
    list-style: none; 
 
    flex: 0 0 100px; 
 
    padding: 10px; 
 
} 
 

 
.flexcontainer li:last-item-in-row { 
 
    border-right: none; 
 
}

<ul class="flexcontainer"> 
 
    <li>Item One</li> 
 
    <li>Item Two</li> 
 
    <li>Item Three</li> 
 
    <li>Item Four</li> 
 
    <li>Item Five</li> 
 
    <li>Item Six</li> 
 
    <li>Item Seven</li> 
 
    <li>Item Eight</li> 
 
    <li>Item Nine</li> 
 
</ul>

https://jsfiddle.net/sx9vhs11/

來源

2017-07-25 Jim Merrikin

Flexbox的和CSS，在一般情況下，不提供針對基於項目的任何方法來隱藏他們換行或位於行/列中。如果您知道行或列中的項目數量，則可以使用'nnth-child（）'。 –

相關：https://stackoverflow.com/q/42176419/3597276 –

這裏不可能使用flexbox，並應用一些像'：last-item-in-row'這樣的花式選擇器。所以如果JS在這裏不會那麼大，你是否考慮使用它？ –

在您的特定佈局，所有的左邊框對齊。

我已經更改（如您已經建議）的項目邊界在左邊。

然後，我設置了一個小把戲容器使用溢出隱藏

.flexcontainer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    border-left: solid 40px transparent; 
 
    padding-left: 0px; 
 
    overflow: hidden; 
 
} 
 

 
.flexcontainer li { 
 
    border-left: 3px solid #c00; 
 
    list-style: none; 
 
    flex: 0 0 100px; 
 
    padding: 10px; 
 
    margin-left: -5px; 
 
    margin-right: 5px; 
 
} 
 

 
.flexcontainer li:last-item-in-row { 
 
    border-right: none; 
 
}

<ul class="flexcontainer"> 
 
    <li>Item One</li> 
 
    <li>Item Two</li> 
 
    <li>Item Three</li> 
 
    <li>Item Four</li> 
 
    <li>Item Five</li> 
 
    <li>Item Six</li> 
 
    <li>Item Seven</li> 
 
    <li>Item Eight</li> 
 
    <li>Item Nine</li> 
 
</ul>

來源

2017-07-25 18:44:47 vals

天才解決方案上面但改變代碼，以允許物品證明 - 內容：中心將打破建議的解決方案。 –

Flexbox目標包裝物品

回答

相關問題