If you're wondering how to utilize flex in your layout, here's a helpful example to guide you through the process.
The key is to apply display: flex to the container housing the images to transform them into flexible items. Remember to set properties like justify-content on the container and not on the individual items unless they are also display flex containers with child elements inside.
Additionally, ensure that flex-wrap, which defaults to nowrap, is switched to
wrap</code so that everything wraps correctly. Customizing widths is crucial – for instance, setting the gallery title to 100% width and each image to 30% width can create a visually pleasing layout. To space the items apart nicely, you can use <code>justify-content: space-between
.
This sample serves as a foundation; feel free to adjust it according to your specific needs.
To delve deeper into this topic, I recommend checking out this comprehensive guide:
A Guide to Flexbox
.gallery img {
padding: 0;
margin: 0;
width: 30%;
height: 20rem;
opacity: 0.6;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
h1 {
width: 100%;
}
<div class="gallery">
<h1>Gallery</h1>
<img src="images/gallery1.jpg" alt="gallery-pic1">
<img src="images/gallery2.jpg" alt="gallery-pic2">
<img src="images/gallery3.jpg" alt="gallery-pic3">
<img src="images/gallery4.jpg" alt="gallery-pic4">
<img src="images/gallery5.jpg" alt="gallery-pic5">
<img src="images/gallery6.jpg" alt="gallery-pic6">
</div>