I'm trying to make a horizontal layout of 5 images side by side equidistant, and to be able to wrap over to the next line as the browser size changes. I want to use flexbox/I want this to be responsive and I cannot figure it out.
I tried using the following properties in my CSS, but it just places the images on separate lines, when I want them side by side equidistant. (Each image is associated with a link to a page on the site)
.image-row { display: flex; flex-wrap: wrap;}<div class="image-row"><!-- Image 1 --><a href="salan.html"><img src="images/curryBlue.png" alt="curry" style="max-width:30%;height:auto"></a><!-- Image 2 --><a href="apps.html"><img src="images/appBlue.png" alt="app" style="max-width:30%;height:auto"></a><!-- Image 3 --><a href="meetha.html"><img src="images/gulabj.png" alt="meetha" style="max-width:30%;height:auto;"></a><!-- Image 4 --><a href="drinks.html"><img src="images/lassi.png" alt="drinks" style="max-width:30%;height:auto;"></a><!-- Image 5 --><a href="chawal.html"><img src="images/mattar.png" alt="chawal" style="max-width:30%;height:auto"></a></div>