display flex 8 div in each row in css pleasealso margin-left 10 pxbut last item should have no margin in each row

To display 8 div elements in each row with a left margin of 10px, and no margin for the last item in each row, you can use the flexbox layout in CSS. Here's an example:

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <!-- Add more div elements here -->
</div>

CSS:

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

.item {
  flex-basis: calc(12.5% - 10px); /* 12.5% to fit 8 items in each row with margin */
  margin-left: 10px;
  margin-bottom: 10px;
}

.item:nth-child(8n) {
  margin-left: 0;
}

Explanation:

• The container element is set to display: flex with flex-wrap: wrap to allow the items to wrap to the next row.
• Each item is set to flex-basis: calc(12.5% - 10px), which means each item should take up 12.5% of the container width minus 10px for the left margin.
• The left margin is set to margin-left: 10px for all items.
• The :nth-child(8n) selector is used to target the last item in each row (8th, 16th, 24th, etc.) and override the left margin to margin-left: 0.

Remember to adjust the flex-basis value if you want a different number of items per row or different margin sizes