css - Flexbox align-content space between with flex column

Question

我想使用阅读更多按钮并将其推到这张卡片的底部。 flex-col 是否有等效的 align-content:space-between？顶部、中间段落和查看更多按钮都在它们自己的 div 中，包裹在父卡片 div 中。

Answer 1

您可以通过将 justify-content: space-between 和 text-align: right 组合到阅读更多按钮来实现这一点。

这导致:

.card {
  background: #ddd;
  margin: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.child-2 {
  text-align: right;
}

.child {
  background: #eee;
  padding: 1rem;
}

<div class="card">
  <div class="child">
    <h1>Article Awesome</h1>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione inventore, dolor dolorem vero, tenetur rerum tempora autem repudiandae deleniti rem sunt perferendis quasi dolore voluptatum fugit quisquam asperiores exercitationem. Exercitationem?
    </p>
  </div>
  <div class="child child-2">Read More ...</div>
</div>

请注意，您可以为卡片设置任意高度，它会根据底部的阅读更多按钮相应地缩放。