Image gallery using flexbox: fill blank space with other images

Question

I want to make an image gallery, html code below:

<div id="animated-thumbnials">
  <a href="images/pic01.jpg">
    <img src="images/pic01.jpg" />
  </a>
  <a href="images/pic02.jpg">
    <img src="images/pic02.jpg" />
  </a>
  <a href="images/pic03.jpg">
    <img src="images/pic03.jpg" />
  </a>
  <a href="images/pic04.jpg">
    <img src="images/pic04.jpg" />
  </a>
  <a href="images/pic05.jpg">
    <img src="images/pic05.jpg" />
  </a>
  <a href="images/pic06.jpg">
    <img src="images/pic06.jpg" />
  </a>
  <a href="images/pic07.jpg">
    <img src="images/pic07.jpg" />
  </a>
  <a href="images/pic08.jpg">
    <img src="images/pic08.jpg" />
  </a>
</div>

and here are some sass I wrote:

* {
  box-sizing: border-box;
}

img {
  width: 100%;
}

#animated-thumbnials {

      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      width: 80%;
      margin: 0 auto;
      justify-content: center;
      a {
        flex: 25%;
        padding: 0 0.2rem;
      }
    }

the result is not expected:

how do I fill those white space between images without having to change the original html code. Thank you. I appreciate your help in advance.

Think about it the other way, pics are actually flex flowing in column direction, then aligned to the top-left corner — hackape, Dec 20 '19 at 06:03
@hackape, I didnt understand. flex flowing in column direction will make only one column, however I want 3 columns side by side — Mir Stephen, Dec 20 '19 at 06:07

score -1 · Answer 1 · answered Dec 20 '19 at 06:05

-1

I think, better use "float:left" instead flex for this example. Or use column flex-direction, but you may have other problem: empty space in width

answered Dec 20 '19 at 06:05

Qsandrew

11
3

the question is how do you solve stated problem and fill that empty space with upcoming images – Mir Stephen Dec 20 '19 at 06:08

Image gallery using flexbox: fill blank space with other images

1 Answers1