flexbox - 使用 Flexbox 对齐 Bootstrap 4.card 中的项目

Question

我正在使用 Bootstrap 4，并且有一个带有 card 类的 div，它具有固定的高度。这就是我想要得到的:

我使用的代码是

<div class="card">
    <div class="card-block d-flex flex-column">
        <h2 class="card-title h4 align-self-start">Top Left</h2>
        <div class="align-self-center">
            Middle Middle
        </div>
        <aside class="align-self-end">Bottom Right</aside>
    </div>
</div>

但是线条都被压在一起，大概是因为 card-block 没有扩展到 card 的整个高度。

有没有办法让 card-block 填充 card，或者让它正确显示？

Answer 1

您可以在 card-block 上使用 justify-content-between..

<div class="card">
    <div class="card-block d-flex flex-column">
        <h2 class="card-title h6 align-self-start flex-grow d-flex">Top Left<br>Top Left</h2>
        <div class="align-self-center flex-grow d-flex">
            Middle Middle
        </div>
        <aside class="align-self-end flex-grow d-flex align-items-end">Bottom Right</aside>
    </div>
</div>

.flex-grow {
    flex: 1 0 0;
}

演示:https://www.codeply.com/go/5dIgA0ul2q

更新 2018 Bootstrap 4(稳定版) card-block 现在是 card-body