Не могу выровнять элементы (flexbox) [дубликат]

138

12 апреля 2022, 16:40

На этот вопрос уже дан ответ здесь:

Как с помощью flexbox расположить в ряд по 2-4 картинки? (1 ответ)

Закрыт 1 год назад.

Ссылка на картинки Нужно позиционировать картинки как в макете: Макет + фото на всякий случай как должно быть: как должно быть и как у меня выходит: как выходит

.content {
    display: flex;
    flex-wrap: wrap;
}
.content_img {
    width: 25%;
}

    <div class="content">
        <div class="content_img" id="hide_img">
            <img src="img/content/room-1.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-2.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-3.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-4.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-5.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-6.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-7.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-8.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-9.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-10.jpg" alt="Images">
        </div>
    </div>

Answer 1

Такое нужно делать на гридах. Если нужно сделать на флексбокс, то единственный способ это оборачивать все в дополнительные контейнеры и выравнивать уже эти контейнеры