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>
You need to sign in to view this answers
Leave feedback about this