Flexbox target wrapped items

Question

I would like to target flex items (random number of items) which are wrapped so I can remove the borders from the last non-wrapped item in each row or from the first wrapped item in each row. I would like to use a CSS pseudo-selector such as something I made up like "last-flexitem-in-row" so that the right border in this case would not appear. I know I can use JS to do this but it seems suboptimal and very heavy-handed to have to do it this way. Imagine as the container width shrinks during a browser resize, the amount of calculation would be crazy.

Any ideas?

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

Flexbox and CSS, in general, do not offer any methods for targeting items based on wrap or location in a row / column. If you know the number of items in a row or column, you may be able to use `nth-child()`. — Michael Benjamin, Jul 25 '17 at 17:21
It's not possible to use flexbox here and apply some fancy selector like `:last-item-in-row`. So if JS here will be not so big, do you consider using it? — Vadim Ovchinnikov, Jul 25 '17 at 17:39
Hi Vadim, I think adding resize event handler JS is too much for the browser to bubble up especially in an application where many other events are bubbling up. Certainly possible but IMHO, this is too heavy-handed. — Jim Merrikin, Jul 25 '17 at 17:43

score 1 · Answer 1 · answered Jul 25 '17 at 18:44

On your particular layout, all the left borders are aligned.

I have changed (as you already suggest) the border on the items to the left.

And then I have set a little trick on the container to hide them using overflow hidden

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

Genius solution above however changing the code to allow items to justify-content:center will break the proposed solution. — Jim Merrikin, Jul 25 '17 at 19:26

Flexbox target wrapped items

1 Answers1