Как выровнять элемент внизу этого гибкого элемента переменного размера

Question

В это jsfiddle, я хочу, чтобы элемент Author был выровнен между различными элементами карты. Я не вижу, как растянуть элемент, содержащий детали, чтобы соответствовать элементам переменного размера в одной строке.

Цель состоит в том, чтобы линии авторов располагались горизонтально вдоль строк.

.container {
  display: flex;
  flex-flow: row wrap;
  margin: 10px;
}

.card {
  width: 200px;
  margin: 10px;
}

.product_detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid pink;
}

.detail_item {
  border: 1px solid blue;
  flex: 1;
}

img {
  width: 100%;
}

<div class='container'>
  <div class="card">
    <section>
      <img src="https://c.booko.info/covers/34edd12eb5c21388/v/600.jpeg" itemprop="image" size="500x750">
    </section>
    <section class="product_detail">
      <div itemprop="name" class='detail_item'>
        <a href="https://booko.info">A Book Title</a>
      </div>
      <div class="detail_item">A Subtitle might be here</div>
      <div itemprop="author" class='detail_item'>Author</div>
    </section>
  </div>

  <div class="card">
    <section>
      <img src="https://c.booko.info/covers/34edd12eb5c21388/v/600.jpeg" itemprop="image" size="500x750">
    </section>
    <section class="product_detail">

      <div itemprop="name" class='detail_item'>
        <a href="https://booko.info">A Book Title which is much longer and takes up a few lines</a>
      </div>
      <div class="detail_item">A Subtitle might be here</div>
      <div itemprop="author" class='detail_item'>Author</div>
    </section>
  </div>
  <div class="card">
    <section>
      <img src="https://c.booko.info/covers/34edd12eb5c21388/v/600.jpeg" itemprop="image" size="500x750">
    </section>
    <section class="product_detail">
      <div itemprop="name" class='detail_item'>
        <a href="https://booko.info">A Book Title</a>
      </div>
      <div class="detail_item">A Subtitle might be here</div>
      <div itemprop="author" class='detail_item'>Author</div>
    </section>
  </div>
</div>

Answer 1

Насколько я понял, вы пытаетесь привязать Div автора к нижней части каждой карты.

Если я правильно понял, вы были довольно близки.Вот чего не хватало:

1. элемент .card должен был быть гибким контейнером

2. раздел .product_detail, необходимый для растяжения до заполненияего доступное пространство

3. Авторский div необходимо привязать к основанию

Вот CSS, который изменился:

.card {
  display: flex;
  flex-direction: column;
}

.product_detail {
  flex: 1;
}

.detail_item[itemprop="author"] {
  margin-top: auto;
}

Вот обновленная Fiddle

---

Примечание: если вы не хотите, чтобы деления .detail_item были равномерно распределены по вертикали, вы можете просто удалить свойство flex: 1; из.detail_item который выглядел бы вот так .

Надеюсь, это поможет.Удачи!