0

I have 8 pictures which I want to place into 2 rows of 4 pictures each using flex-box. How would I do this? I've tried using flex-wrap but that made it so on the first row there were 5 images and on the second 3 images.

<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;
}
George Baaklini
  • 3
  • 1
  • 2
  • see https://stackoverflow.com/questions/55791036 / https://stackoverflow.com/questions/39504320/ – kukkuz May 16 '19 at 02:21

1 Answers1

0

Set the parent div to have flex-flow: column , and the wrap each group of 4 images in a div and the set this div to have display: flex.

Hence, my solution would be:

<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>
dee cue
  • 983
  • 1
  • 7
  • 23