Flexbox:当列的宽度不同时,是否可以将第一行=底部和第二行=顶部对齐?

目标:将第一行的项目(图像)对准底部,将第二行的项目对准顶部。

条件: (1)每个项目都有不同的高度。 (2)每个项目都有不同的宽度。

使用表,它变得非常简单:

enter image description here

.tall {height:100px}
.short {height:50px}
p {background:blue;}
table tr>td {vertical-align:bottom}
<table>
<tr>
<td><p class=tall>.</td>
<td><p class=short>.</td>
<td><p class=tall>.</td>
<td><p class=short>.</td>
</tr>

<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</tr>
</table>

如果表响应,我会使用它们。

如果容器中的每个项目都是图像+文本组合(flex中的一行),则CSS不能单独定位和对齐图像,因为它与文本相关。

如果我使用两行,每行都弯曲了,那么它将不再响应:在小屏幕上,将打印所有第一行项目,然后打印所有第二行项目,例如row1cell1与row1cell2不匹配。在大屏幕上,由于每个文本块的宽度不同,因此列不会对齐。

解决方案: (1)有没有办法用flexbox做到这一点? (2)有没有一种方法可以使表响应? (3)可以在所有短图像中添加空格,使其与最高的图像一样高,这很痛苦。