将项目与底部对齐，同时保持flexbox的伸展度

Question

我正在使用flexbox构建以下卡片布局

.card {
    flex-basis: calc(100% - 40px);
    border-radius: 4px;
}

.card__content {
    padding: 25px;
}

.card__footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}

我试图实现card__footer始终与底部对齐。当我尝试添加以下代码时，我失去了伸展度，并且物品的高度不再相同

.card {margin-bottom: auto;}

我有什么想法要寻找解决方案？

Answer 1

.card {
    flex-basis: calc(100% - 40px);
    border-radius: 4px;
    border: 1px solid #888;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card_content {
    padding: 25px;
}

.card_footer {
    padding: 5px;
    border: 1px solid #888;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 25px;
}

<div class="card">
  <div class="card_content">
    <h2>Hello</h2>
    <p>This is just a sample text</p>
  </div>
  <div class="card_footer">
    <div class="">1</div>
    <div class="">2</div>
  </div>
</div>

Answer 2

尝试使用“ align-items-end ”会有所帮助。

Bootstrap Guide