How to build a product catalog grid on flexbox?

Question

css

Hello everyone
I’m very stupid and can’t figure out how to make a simple grid for a product catalog with three products per line on flexbox, help me figure it out, pliz)
Here’s how I do it - https://codepen.io/anon/pen/OEogPX
But only 2 fit product and because of the margin-bottom of the third block, it already climbs to the next line.
How to make sure that there are still 3 products each and the last third one is pressed to the right edge?

Answer 1

Parent:
justify-content: space between Child
:
width: calc(33.3333% - {your indent})
flex: 0 0 calc(33.3333% - {your indent})

Answer 2

For the wrapper, set justify-content: space-between
For items, set the desired width (using max-width or calculate as a percentage), we also remove margin-right
The last item, set marign-left: auto
https://jsfiddle.net/z0s7k3qe/