Question

在this jsfiddle中，我希望Author元素在各个card元素之间对齐。我看不到如何拉伸包含细节的元素以匹配同一行中大小可变的元素。

目标是使“作者”行在各行中水平对齐。

.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

据我了解，您正在尝试将Author div锚定在每张卡的底部。

假设我理解正确，那么您就很近了。这是缺少的东西：

.card div必须是一个伸缩容器
.product_detail部分需要扩展以填充其可用空间
作者div需要固定在底部

这是更改的CSS：

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

.product_detail {
  flex: 1;
}

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

这里是updated Fiddle

注意：如果您不希望.detail_item div垂直垂直分布，则可以从看起来像like this的flex: 1;中删除.detail_item属性。

希望这会有所帮助。祝你好运！

如何在可变大小的flex元素的底部对齐元素

1 个答案: