当博客标题长度不同时，如何使用flexbox将元素排成一行

Question

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

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

}

image showing elements not lining up properly due to one long blog title

Answer 1

使article元素也可以弯曲，然后通过将margin:auto应用于margin-bottom: auto，简单地将h2的“魔法”与flexbox结合使用：

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

article {
  display: flex;
  flex-direction: column;
  width: 50%;
}

article h2 {
  margin-bottom: auto;
}

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

Answer 2

将class="title"添加到您的标题中

<h2 class="title">title</h2>

添加css仅限标题为2行

.title {
  display: -webkit-box;
  -webkit-line-clamp: 2; //you can change as per need
  -webkit-box-orient: vertical; 
 text-overflow: ellipsis;
}

Ref