html - 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

您需要使用display: flex，当您使用display: inline时，其他所有的flex属性都不会受到影响。

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