垂直对齐弹性项目的内部元素（类似于网格，但带有换行）

Question

我在弹性容器中有数量可变的

.item

，这样它们就可以响应式换行。每个

.item

都有相同的标记，但内容不同。我希望所有

<h1>

都垂直对齐，所有

<p>

也都垂直对齐。

有没有一种方法可以在不重写标记或使用 javascript 的情况下实现此目的？

我知道这可以通过网格并将 .items 设置为

display: contents; 

来完成，但“多行网格”不会换行。

示例：https://codepen.io/vzjrz/pen/KKrGOWq

Answer 1

将

margin-top: auto;

添加到 css 中的“p”标签