Как заставить элементы выстраиваться в линию, используя 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%;

}

изображение, показывающее элементы, не выстроенные в ряд должным образом из-за одного длинного заголовка блога

Answer 1

Также заставьте элементы article сгибаться, а затем просто используйте «магию» margin:auto в сочетании с flexbox, применяя margin-bottom: auto для h2:

.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, чтобы ограничить заголовок только двумя строками

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

Ref