Css 当博客标题长度不同时，如何使用flexbox让元素排列

我正在尝试创建一个博客页面，其中显示每个博客的缩略图、标题、日期和类别。由于不同的博客标题，元素排列不正确。理想情况下，我希望日期、类别和阅读更多按钮与相邻的博客列表水平对齐。然而，如果不可能的话，我也会满足于只在底部对齐“阅读更多”按钮。我附上了一张图像来显示错位

<div class="flex-container">
  <article>
    <img />
    <h2>title</h2>
    <p>date</p>
    <p>category 1, category 2</p>
    <a>read more</a>
  </article>
</div>

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

article {
  width: 50%;

}

使
文章
元素也具有灵活性，然后简单地将
页边距：自动
的“魔力”与flexbox结合使用，方法是为
h2
应用
页边距底部：自动
：


.flex容器{
显示器：flex；
弯曲方向：行；
flex-wrap:wrap；}
文章{
显示器：flex；
弯曲方向：立柱；
宽度：50%；
}
第h2条{
页边距底部：自动；
}

标题
日期

第一类，第二类

阅读更多
真正的
长
标题
日期

第一类，第二类

阅读更多
使
文章
元素也具有灵活性，然后简单地将
页边距：自动
的“魔力”与flexbox结合使用，方法是为
h2
应用
页边距底部：自动
：


.flex容器{
显示器：flex；
弯曲方向：行；
flex-wrap:wrap；}
文章{
显示器：flex；
弯曲方向：立柱；
宽度：50%；
}
第h2条{
页边距底部：自动；
}

标题
日期

第一类，第二类

阅读更多
真正的
长
标题
日期

第一类，第二类

阅读更多
您可以共享任何JSFIDLE或codepen链接以了解您是如何实现的吗？您将flex应用于单个文章，您需要将flex应用于文章所在的容器，以便使所有文章具有相同的高度，之后，你可以在文章中进行调整，这样至少按钮会在底部对齐。对不起@JoseGuerra这就是我所拥有的-我已经更新了代码，以反映你所不能做到的。没有CSS机制来对齐不共享父元素的元素。您唯一的选择是将标题后面的所有内容对齐到底部。在这种情况下-@Suresh这里可以看到一个基本的代码笔，你能分享任何JSFIDLE或代码笔链接来看看你是如何实现的吗？你要将flex应用到单个文章中，你需要将flex应用到文章所在的容器中，这样你就可以使所有文章都具有相同的高度，之后，你可以在文章中进行调整，这样至少按钮会在底部对齐。对不起@JoseGuerra这就是我所拥有的-我已经更新了代码，以反映你所不能做到的。没有CSS机制来对齐不共享父元素的元素。您唯一的选择是将标题后面的所有内容对齐到底部。在这种情况下-@Suresh可以在这里看到一个基本的代码笔