フレックスボックスのターゲットラップアイテム

Question

ラップされていないフレックスアイテム（アイテムの乱数）をターゲットにしたいので、各ローの最後のラップされていないアイテムまたは各ローの最初のラップアイテムからボーダーを削除できます。私は、このケースでは右の境界線が現れないように、「last-flexitem-in-row」のようなCSS疑似セレクタを使用したいと思います。私はJSを使用してこれを行うことができることを知っていますが、このようにしなければならないためには、最適ではなく、非常に重いようです。ブラウザのサイズ変更中にコンテナの幅が縮小すると、計算量が狂っているとします。

アイデア？あなたの特定のレイアウトに

.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/

Answer 1

、すべての左の境界線が並んでいます。

左の項目の枠線を変更しました（あなたの提案通り）。

そして私は、一般的には、に基づいてアイテムを標的とするための任意の方法を提供していない

.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>