When images have no links, everything works smoothly:
<div id="gallery">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
</div>
#gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0 4px;
}
#gallery img {
width: 25%;
height: 300px;
object-fit: cover;
margin-top: 8px;
padding: 0 4px;
border-radius: 10px;
}
However, things get messy when the images are linked:
<div id="gallery">
<a href="1.jpg"><img src="1.jpg"/></a>
<a href="2.jpg"><img src="2.jpg"/></a>
<a href="3.jpg"><img src="3.jpg"/></a>
<a href="4.jpg"><img src="4.jpg"/></a>
</div>
Adding the following helps slightly:
#gallery a {
width: 100%;
}
But the layout is then just a vertical stack of images.
Does flexbox not support using images as links?