Flex-wrap не переносит элементы на следующую строку
Итак, у меня есть галерея изображений, созданная с помощью 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; }
Я пытаюсь просто переместить последние элементы в строке на следующую строку (строку), когда я сжимаю браузер. Вместо этого мои фотографии становятся все меньше и меньше. Как я могу этого добиться?
когда я заставляю его сгибать его, чтобы добраться до одного столбца ..
ты дал обертке ширину?
хорошо, я увеличил ширину до пикселей, затем попробовал display: flex; и теперь все идеально;) большое спасибо
@MarkR - Рад, что проблема решена. Но позвольте мне сообщить вам, что в вашем коде много ошибок. Как тег <a> не был закрыт должным образом. Также вы используете тег <ul> без использования тега <li> между ними. Попросите вас исправить ваш код для повышения производительности.
Я просто удаляю закрывающий тег, когда я удалил 34 строки почти такого же кода;) Хороший момент по поводу ul, но он ничего не меняет, если это ul или div ...
использование свойств гибкости, но не установка элемента в качестве гибкости отображения - это все равно что есть хлеб с маслом без хлеба
Без display: flex остальная часть вашего CSS бессмысленна. Также: если вы используете flex-flow, вам не нужно использовать flex-wrap и flex-direction.
Ответы 2
Вам необходимо использовать display: flex, когда вы используете display: inline, все остальные свойства гибкости не повлияют.
.wrap {
display: flex;
flex-flow: row wrap;
flex-wrap: wrap;
flex-direction: row;
}
Я счастлив, что ваша проблема была решена, но, чтобы добавить больше помощи к вопросу для других участников, я сделал фрагмент с html и css, который может быть ответом.
Вы забыли поставить недвижимость:
display: flexon the wrap class.
Также в вашем 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>Удачного кодирования
как применить гибкую оболочку к встроенному объекту? попробуйте сделать его гибким. Но нам также нужно увидеть стили для вашего якоря - если они имеют процентную ширину, то они, очевидно, всегда будут уменьшаться вместе с окном браузера.