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目标包装物品

回答

相关问题