html - 如何使用flexbox将这些图像分为两行，每行4张图片

我有8张图片，我想使用flex-box放入2行，每行4张图片。我该怎么做？我试过使用flex-wrap，但是第一行有5张图像，第二行有3张图像。

<div class="images">
        <a href="" class="img1">
            <img src="images/ballon.jpg" alt="">
            <h4></h4>
        </a>
        <a href="" class="img2">
            <img src="images/planche.jpg" alt="">
        </a>

        <a href="" class="img3">
            <img src="images/golf.jpg" alt="">
        </a>

        <a href="" class="img4">
            <img src="images/casque.jpg" alt="">
        </a>

        <a href="" class="img5">
            <img src="images/patin.jpg" alt="">
        </a>
        <a href="" class="img6">
            <img src="images/velo.jpg" alt="">
        </a>
        <a href="" class="img7">
            <img src="images/yoga.jpg" alt="">
        </a>

        <a href="" class="img8">
            <img src="images/genoux.jpg" alt="">
        </a>
        <a href="">voir plus</a>

    </div>

div.images{
    display: flex;
}

div.images img{
    width: 200px;
    height: 200px;
}

最佳答案

将父div设置为具有flex-flow: column，并将每组4张图像包装在div中，并将此div设置为具有display: flex。

因此，我的解决方案是：

<div class="images">
    <div class="row">
        <a href="" class="img">
            <img src="http://placekitten.com/200/200" alt="">
            <h4></h4>
        </a>
        <a href="" class="img">
            <img src="http://placekitten.com/200/200" alt="">
            <h4></h4>
        </a>
        <a href="" class="img">
            <img src="http://placekitten.com/200/200" alt="">
            <h4></h4>
        </a>
        <a href="" class="img">
            <img src="http://placekitten.com/200/200" alt="">
            <h4></h4>
        </a>
    </div>
    <div class="row">
        <a href="" class="img">
            <img src="http://placekitten.com/200/200" alt="">
            <h4></h4>
        </a>
        <a href="" class="img">
            <img src="http://placekitten.com/200/200" alt="">
            <h4></h4>
        </a>
        <a href="" class="img">
            <img src="http://placekitten.com/200/200" alt="">
            <h4></h4>
        </a>
        <a href="" class="img">
            <img src="http://placekitten.com/200/200" alt="">
            <h4></h4>
        </a>
    </div>
    <div class="row">
        <a href="">voir plus</a>
    </div>

</div>

<style>
    div.images{
        display: flex;
        flex-flow: column;
    }

    div.images div.row {
        display: flex;
        flex-flow: row;
    }

    div.images img{
        width: 200px;
        height: 200px;
    }

</style>

关于html - 如何使用flexbox将这些图像分为两行，每行4张图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56159909/