flex wrap last row items selector in css

To select the last row of flex items in CSS, you can use the :nth-last-child selector along with :nth-child selector in combination.

Here's an example:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex-basis: 33.33%;
  box-sizing: border-box;
  border: 1px solid black;
}

.flex-container :nth-last-child(-n+3):nth-child(3n+1),
.flex-container :nth-last-child(-n+3):nth-child(3n+2),
.flex-container :nth-last-child(-n+3):nth-child(3n+3) {
  background-color: yellow;
}

In this example, the .flex-container is the flex container and .flex-item is the flex item. The flex-wrap property is set to wrap to allow the items to wrap onto multiple lines.

The selector .flex-container :nth-last-child(-n+3):nth-child(3n+1), .flex-container :nth-last-child(-n+3):nth-child(3n+2), .flex-container :nth-last-child(-n+3):nth-child(3n+3) is used to select the last row items. The nth-last-child(-n+3) selects the last three items, and the nth-child(3n+1), nth-child(3n+2), nth-child(3n+3) selects every 3rd item starting from the 1st, 2nd, and 3rd child respectively in the last row.

In this example, the background color of the last row items is set to yellow, but you can modify the style as per your requirement