justify-content

index.html

<h2>Галерея 1</h2>
    <div class="gallery gallery-1">
        <img src="img/photo-1.jpeg" alt="">
        <img src="img/photo-2.jpeg" alt="">
        <img src="img/photo-3.jpeg" alt="">
    </div>
    <h2>Галерея 2</h2>
    <div class="gallery gallery-2">
        <img src="img/photo-4.jpeg" alt="">
        <img src="img/photo-5.jpeg" alt="">
        <img src="img/photo-6.jpeg" alt="">
    </div>
    <h2>Галерея 3</h2>
    <div class="gallery gallery-3">
        <img src="img/photo-7.jpeg" alt="">
        <img src="img/photo-8.jpeg" alt="">
        <img src="img/photo-9.jpeg" alt="">
    </div>

justify-content.markdown

justify-content

A Pen by Roman on CodePen.

License.

style.css

h2 {
    margin: 0;
}

.gallery {
    box-shadow: 5px 5px 10px grey;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
}

.gallery-1 {
    justify-content: flex-start;
}

.gallery-2 {
    justify-content: flex-end;
}

.gallery-3 {
    justify-content: space-between;
}

.gallery > img {
    width: 200px;
}