向相反方向增长flexbox儿童

Question

我想在Bootstrap 4栏/卡中实现这种效果：

是否可以使用flexbox？

这是我玩的源代码：

https://jsfiddle.net/dandaka/us04p2vg/

LocalDate

我曾考虑过以下解决方案：

• 对图像和文本使用多行。在小断点堆叠时会工作不好。并且整张卡应该具有悬停状态，当分成2行时会很糟糕。
• 使用Bootstrap卡。它们似乎只适用于固定高度的图像。
• 在flexbox中使用基线对齐。找不到任何一个例子，其中两个元素从一个轴向不同的方向生长。
• 修复文本块高度（以像素为单位）。根本不是解决方案，只是一种解决方法。

无法想到其他任何事情。

Answer 1

一种方法是在顶部图像和下部文本上设置％高度。然后使用flexbox相应地对齐项目。

<div class="row align-items-baseline">
    <div class="col">
        <div class="img-top d-flex h-50"><img src="https://placehold.it/350x100" alt="" class="align-self-end img-fluid"></div>
        <div class="text-bottom p-3 h-50">Lorem ipsum her eis some more text</div>
    </div>
    <div class="col">
        <div class="img-top d-flex h-50"><img src="https://placehold.it/350x50" alt="" class="align-self-end img-fluid"></div>
        <div class="text-bottom p-3 h-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</div>
    </div>
    <div class="col">
        <div class="img-top d-flex h-50"><img src="https://placehold.it/350x250" alt="" class="align-self-end img-fluid"></div>
        <div class="text-bottom p-3 h-50">Lorem ipsum dolor sit amet</div>
    </div>
</div>

http://www.codeply.com/go/vc8Mk2Rjm0

我使用50/50，因为它包含在BS4中，但您可以自定义顶部/底部的比例..

.h-40 {
    height: 40%;
}
.h-60 {
    height: 60%;
}

http://www.codeply.com/go/whe449Ixtx