多个图像的响应对齐（水平和垂直轴）

Question

我认为这个gif解释得非常好：

https://gfycat.com/FormalReasonableHagfish

背景：我正在为一家销售TONS产品的公司制作数字目录（我没有启动该项目），有时它们很小，有时很大，有时很宽，等等。在特定区域，比方说400px x 400px。

我使用flexbox进行水平对齐，效果非常好，但在垂直轴上，产品具有静态值（prod_1 top：0px，prod_2：top 10px，prod_3 top：20px ......）

编辑：我的问题/需要是：我希望能够对齐（在水平和垂直轴上响应）1 div内的1到6个图像但是flexbox只允许我选择一个轴（flex-direction row或列），我该怎么办？

代码是这样的：

<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所展示的一样。你应该能够根据自己的喜好调整它。

Get list of items in custom adapter

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

告诉我你是否有任何疑问，我会尽力回答。但代码应该是非常明显的。 ：）