html - 多个图像的响应对齐(水平和垂直轴)

Question

我认为这张 gif 很好地解释了它:

https://gfycat.com/FormalReasonableHagfish

背景:我正在为一家销售大量产品的公司制作数字目录(我没有开始这个元素)，有时它们很小，有时很大，有时很宽，等等。它们在特定领域，比方说 400px x 400px。

我用 flexbox 进行了水平对齐，效果很好，但在垂直轴上，产品具有静态值(prod_1 top:0px，prod_2:top 10px，prod_3 top:20px ...)

---

编辑:我的问题/需要是:我希望能够在 1 个 div 内对齐(响应地在水平轴和垂直轴上)1 到 6 个图像，但 flexbox 只让我选择一个轴(flex-direction 行或专栏)，我能做什么？

代码是这样的:

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

如果可能，解决方案应该使用 CSS，如果不能，则可以使用 Javascript，或者稍微更改 HTML。

这是因为我只能访问 CSS 和 JS。 index.html 是由另一个团队开发/控制的应用程序从数据库自动生成的，要求他们进行更改并不容易/快速。

---

我认为最好的方法是使用 javascript，但考虑到这是一个大元素并且已经编写了很多代码(不是我写的)，这可能并不那么容易。

大家怎么看？我不需要完整的解决方案，但非常感谢一些指导，谢谢!

Answer 1

好的，所以我不是 100% 确定您需要什么，但这是我编写的一些代码，它们几乎可以完成您的 gif 显示的内容。您应该能够根据自己的喜好对其进行调整。

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;
}

如果您有任何疑问，请告诉我，我会尽力解答。不过，代码应该是不言自明的。 :)