Responsive alignment of multiple images (horizontal AND vertical axis)

Question

I think this gif explains it very well:

https://gfycat.com/FormalReasonableHagfish

Context: I'm working on a digital catalog (I didn't start the project) for a company that sells TONS of products, sometimes they are small, sometimes big, sometimes wide, etc. They go on a specific area, lets say 400px x 400px.

I did horizontal alignment with flexbox and it works very well but on the vertical axis the products have static values (prod_1 top: 0px, prod_2: top 10px, prod_3 top: 20px...)

---

EDIT: My question/need is: I want to be able to align (responsively in the horizontal and vertical axis) 1 to 6 images inside 1 div but flexbox only let me choose one axis (flex-direction row or column), what can I do?

The code is something like this:

<div class='container'>
  <img class='item_0'>
  <img class='item_1'>
  <img class='item_2'>
  <img class='item_3'>
  <img class='item_4'>
</div>

If posible the solution should be in CSS, if it can't be done, then it could be in Javascript or maybe changing a little bit the HTML.

This is because I only have access to CSS and JS. The index.html is generated automatically from a database by an application developed/controlled by another team and it's not that easy/quick to ask them for changes.

---

The best way I thought is with javascript but it may not be that easy, considering it's a big project and there's A LOT of code already written (not by me).

What do you guys think? I don't need the complete solution but some direction would be really appreciated, thank you!

Answer 1

Ok, so I am not 100% sure about what you need, but here's some code I made that does pretty much what your gif showed. You should be able to tweak it to your liking.

https://codepen.io/AlexWulkan/pen/wmmPvL

HTML:

<div class="container">
    <div class="row">
        <div class="box"></div>
    </div>
    <div class="row">
        <div class="box"></div>
    </div>
    <div class="row">
        <div class="box"></div>
    </div>
</div>

CSS:

/* Outer container */
.container {
    display: flex;
    flex-direction: column;
    background-color: #eee;
    height: 400px;
    width: 400px;
}

/* Each row of boxes */
.row {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 1rem;
}

/* determines the position of the boxes in each row */
.row:first-child {
    justify-content: flex-end;
}

.row:nth-child(2) {
    justify-content: center;
}

.row:last-child {
    justify-content: flex-start;
}

/* Each box */
.box {
    background-color: #666;
    height: 100px;
    width: 100px;
}

Tell me if there's anything you have questions about and I'll try to answer. The code should be quite self-explanatory though. :)