Cloud Stack Ninja

I have a flex row that wraps around when the content is too large for 1 row. Items are divided by a small red border on the left, and the last item has a red border on the right too end the list. The issue is that the last item on a row does not have the right border, and I can't find a CSS selector to apply the right border to it:

enter image description here

#container {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  padding: 25px;
  background-color: black;
  color: white;
  align-items; stretch;
}

.item {
  width: 100px;
  text-align: center;
  border-left: 3px solid firebrick;
  margin-bottom: 5px;
}

.item:last-of-type {
  border-right: 3px solid firebrick;
}
<div id="container">
  <div class="item">Test</div>
  <div class="item">Test</div>
  <div class="item">Test</div>
  <div class="item">Test</div>
  <div class="item">Test</div>
  <div class="item">Test</div>
</div>

Does a CSS selector exist to select the last item in a wrapped flexbox row? If not, is there another easy solution for this?



Read more here: https://stackoverflow.com/questions/64403527/how-to-select-the-last-item-of-a-wrapped-flex-row-in-css

Content Attribution

This content was originally published by Titulum at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: