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; 
}

Answer 2

很高兴您的问题得到解决，但是为了给其他贡献者更多的帮助，我用html和CSS制作了一个片段，可以作为答案。

您忘记将属性

 display: flex

放在包装类上。

此外，在您的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>

快乐编码

flex-wrap没有将元素包装到下一行

2 个答案: