Question

我想定位包装的flex项目（随机数量的项目），这样我就可以从每行中的最后一个非包装项目或每行中的第一个包装项目中删除边框。我想使用一个CSS伪选择器，比如我编写的＃34; last-flexitem-in-row＆＃34;这样在这种情况下不会出现右边框。我知道我可以使用JS来做到这一点，但这似乎不是最理想的，而且非常严厉，必须这样做。想象一下，当浏览器调整大小时容器宽度缩小时，计算量就会很疯狂。

有什么想法吗？

＆＃13;

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

＆＃13;

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

＆＃13;

https://jsfiddle.net/sx9vhs11/

Answer 1

在您的特定布局上，所有左边框都已对齐。

我已经改变了（正如你已经建议的那样）左边项目的边框。

然后我在容器上设置了一个小技巧，使用溢出隐藏

来隐藏它们

＆＃13;

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

＆＃13;

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

＆＃13;

Flexbox目标包装物品

1 个答案: