Как я могу разместить эти изображения в 2 ряда по 4 картинки в каждом, используя flexbox

Question

У меня есть 8 картинок, которые я хочу поместить в 2 ряда по 4 картинки в каждой, используя flex-box. Как бы я это сделал? Я попытался использовать 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;
}

Answer 1

Установите для родительского элемента 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>