How to remove right-margin from last item in a row while using flexbox, flex-wrap, and last-of-type [duplicate]

Question

When I use flexbox, if I want a margin to add spacing to each element I would usually do this:

.flexbox-item {
  flex: 1 0 auto;
  margin-right:10px;
}
.flexbox-item:last-of-type {
  margin-right: 0px;
}

This works if I don't use flex-wrap because they last item will always be the actual last item on the row.

When I use flex-wrap however, the last item of the row changes depending on the window width (and more rows are added automatically), meaning I'm removing the right margin from the 1st item in a row sometimes.

Anyone know of a solution to this issue?

EDIT: I don't believe this is a duplicate

This is about keeping rows horizontally equal, not vertically.

Anyway, my solution is using negative margins which can found on that thread by digging through it but it's not the most popular solution. Here's my solution:

Seems that the answer to this issue is to add a negative margin to the parent flexbox container.

.flexbox-container {
  margin-right:-10px;
}
.flexbox-item {
  flex: 1 0 auto;
  margin-right:10px;
}

Then when your flexbox items change to 100%, just remove the right margin from the items:

@media (max-width: 767px) {
    .flexbox-item {
      margin-right:0px;
    }
    .flexbox-container {
      margin-right: 0px;
    }
}

If there is a better solution I'm all ears.

Answer 1

I'm not entirely sure about your use-case. But why not use justify-content: space-between instead of margin. Then you don't need to remove margin for the last element in the row. https://jsfiddle.net/n2vqwg79/