多幅图像(水平和垂直轴)的响应对准
我认为这是一个很好的解释：
https://gfycat.com/FormalReasonableHagfish
背景:我正在为一家销售大量产品的公司制作数字目录(我没有开始这个项目)，有时它们是小的，有时是大的，有时是宽的等等。它们在一个特定的领域，比如说400 px400 go。
我做了水平对齐，它的工作非常好，但在垂直轴上的产品有静态值(prod_1顶部: 0px，prod_2:顶10 0px，prod_3顶部:20 0px.)
编辑:我的问题/需要是:我想要能够对齐(在水平和垂直轴上负责)1到6图像在1 div内，但柔性盒只允许我选择一个轴(弯曲方向行或列)，我能做什么？。
代码是这样的：
<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，但考虑到这是一个很大的项目，而且已经编写了很多代码(不是我编写的)，这可能并不容易。
你们觉得怎么样？我不需要完整的解决方案，但一些方向将是非常感谢的，谢谢！
回答 1
Stack Overflow用户
发布于 2018-03-30 03:44:43
好的，所以我不能百分之百地确定你需要什么，但是下面是我做的一些代码，它可以很好地实现你的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;
}如果你有什么问题告诉我，我会尽力回答的。不过，代码应该是很清楚的。:)
https://stackoverflow.com/questions/49572746
复制![[译]响应式图像](https://ask.qcloudimg.com/http-save/yehe-1000857/icha8uubnl.jpeg)
相似问题
响应容器中重叠的多幅图像
多幅图像上的信件保持响应性
一幅图像中的多幅图像
具有响应性梯度问题的css多幅图像
上传多幅图像
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
