I have this aqua container with 6 divs inside of it. I'm using flex-wrap to wrap the divs when they get too big for the current screen, however I want the first div on the top line to align to the left of the aqua container and the final div on that line to align to the right so even when a div gets pushed to a second line, the full space of the container is taken up and there is no empty space leftover.
I don't want to use space-between because I want the gap between each div to stay the same (32px).
code:
.container { width: 90vw; margin: auto; background-color: aqua; display: flex; flex-wrap: wrap; gap: 32px;}.container div { background-color: blue; height: 200px; width: 300px;}
<div class="container"><div></div><div></div><div></div><div></div><div></div><div></div></div>