flex-wrap не переносит элементы на следующую строку

Question

Итак, у меня есть галерея изображений, созданная с помощью Lightbox2.Вот HTML

<div class="container">
    <h2 class="makeup text-center">Galeria</h2>
    <div class="heading-underline"></div>
        <ul class="wrap">
            <a href="img/galeria/1.JPG" data-lightbox="clients" data-title="Opis zdjęcia?">
            <a href=".............................
            <a href="img/galeria/19.JPG" data-lightbox="clients" data-title="Opis zdjęcia?">
                <img src="img/galeria/19.JPG"></a>
        </ul>
    </div>

и CSS:

.wrap {
display: inline;
flex-flow: row wrap;
flex-wrap: wrap;
flex-direction: row; }

Что я пытаюсь сделать, это просто переместить последние элементы в строке на следующую строку (строку), когда я уменьшаюбраузер.Вместо этого мои фотографии становятся все меньше и меньше.Как мне этого добиться?

Answer 1

Я рад, что ваша проблема была решена, но для того, чтобы добавить дополнительную помощь к вопросу другим участникам, я сделал фрагмент с HTML и CSS, который может быть ответом.

Вы забылипоместите свойство:

display: flex 

в класс wrap.

Кроме того, в вашем html-файле обнаружена пара ошибок, все они были исправлены в коде ниже

.wrap {
   display: flex;
   flex-flow: row wrap;
   flex-wrap: wrap;
   flex-direction: row;
}

<div class="container">
    <h2 class="makeup text-center">Galeria</h2>
    <div class="heading-underline">
        <ul class="wrap">
            <li>
                <a href="https://picsum.photos/200/300" data-lightbox="clients" data-title="Opis zdjęcia?">
                <img src="https://picsum.photos/200/300"></a>
            </li>
           <li>
                <a href="https://picsum.photos/200/300" data-lightbox="clients" data-title="Opis zdjęcia?">
                <img src="https://picsum.photos/200/300"></a>
            </li>
           <li>
                <a href="https://picsum.photos/200/300" data-lightbox="clients" data-title="Opis zdjęcia?">
                <img src="https://picsum.photos/200/300"></a>
            </li>
           <li>
                <a href="https://picsum.photos/200/300" data-lightbox="clients" data-title="Opis zdjęcia?">
                <img src="https://picsum.photos/200/300"></a>
            </li>
           <li>
                <a href="https://picsum.photos/200/300" data-lightbox="clients" data-title="Opis zdjęcia?">
                <img src="https://picsum.photos/200/300"></a>
            </li>
           <li>
                <a href="https://picsum.photos/200/300" data-lightbox="clients" data-title="Opis zdjęcia?">
                <img src="https://picsum.photos/200/300"></a>
            </li>
           <li>
                <a href="https://picsum.photos/200/300" data-lightbox="clients" data-title="Opis zdjęcia?">
                <img src="https://picsum.photos/200/300"></a>
            </li>
           <li>
                <a href="https://picsum.photos/200/300" data-lightbox="clients" data-title="Opis zdjęcia?">
                <img src="https://picsum.photos/200/300"></a>
            </li>
        </ul>
    </div>
</div>

Счастливое кодирование

Answer 2

Вам нужно использовать display: flex, когда вы используете display: inline, все остальные свойства flex не влияют.

.wrap {
    display: flex;
    flex-flow: row wrap;
    flex-wrap: wrap;
    flex-direction: row; 
}