justify-content: space-between not distributing leftover width [closed]

2 weeks ago 23
ARTICLE AD BOX

See fiddle: https://jsfiddle.net/1pLwr4a7/2/

<div class="grid"> <div class="elem 001"><img src="https://www.nyrb.com/cdn/shop/files/prokosch-final.jpg?v=1753371724" /></div> <div class="elem 002"><img src="https://www.nyrb.com/cdn/shop/files/cagnati-1.jpg?v=1754329866" /></div> <div class="elem 003"><img src="https://www.nyrb.com/cdn/shop/files/hell-revised_with_afterword.jpg?v=1761942110" /></div> <div class="elem 004"><img src="https://www.nyrb.com/cdn/shop/files/9781681379616.jpg?v=1742405615" /></div> <div class="elem 005"><img src="https://www.nyrb.com/cdn/shop/files/Love_and_Death_cvr_final.jpg?v=1768579903" /></div> </div> .grid { width:100%; display: -moz-box; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; flex-wrap:wrap; flex-direction:row; justify-content: flex-start; align-content:space-between; align-items:center; text-align:left; } .elem { flex: 0 0 30%; margin-top:1.5rem; margin-bottom:1.5rem; } .elem img { width:100%; }

Parent is set to 100%. Children basis is 30%, meaning each row should have 3 items and there should be 10% width leftover that can be distributed by justify-content. I want this to space between, but the space is loaded to the right.

enter image description here

Read Entire Article