Responsive alignment of multiple images (horizontal AND vertical axis) - html

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. :)