以相反的方向培养 flexbox 孩子答案

【问题标题】：Grow flexbox children in opposite directions以相反的方向培养 flexbox 孩子
【发布时间】：2017-07-22 02:15:16
【问题描述】：

我想在 Bootstrap 4 列/卡片中实现这个效果：

flexbox 可以吗？

这是我玩的源代码：

<div class="container">
  <div class="row">
    <div class="col">
      <div class="img-top"><img src="https://placehold.it/350x100" alt="" class="img-fluid"></div>
      <div class="text-bottom">Lorem ipsum</div>
    </div>
    <div class="col">
      <div class="img-top"><img src="https://placehold.it/350x50" alt="" class="img-fluid"></div>
      <div class="text-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</div>
    </div>
    <div class="col">
      <div class="img-top"><img src="https://placehold.it/350x250" alt="" class="img-fluid"></div>
      <div class="text-bottom">Lorem ipsum dolor sit amet</div>
    </div>
  </div>
</div>

我曾想过以下解决方案：

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

想不出别的了。

【问题讨论】：

@ZimSystem 老实说，我什至不知道从哪里开始。我可以对齐开始或结束。但这并不能解决任何问题。我添加了一个带有示例代码的 JSFiddle。
@ZimSystem B4 卡似乎适用于固定高度的图像，与我的情况无关。当图像具有不同的大小时，布局会中断。所有 flexbox 对齐示例都没有显示任何接近我的任务的内容。

标签： css twitter-bootstrap flexbox bootstrap-4 twitter-bootstrap-4

【解决方案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

【讨论】：

当我像这样添加另一行时，一切都变得一团糟jsfiddle.net/dandaka/9oaaxgzs/1
是的，问题并没有真正提到这一点，因此您可能需要调整此解决方案。也许在每一行上设置一个最小高度。
min-height 扼杀了这个目的。当您可以首先指定高度时，为什么要设置最小高度？目标是让对象具有灵活的高度，同时保持整行相同的高度。并与一个轴对齐。
这是一个建议。正如我所说，您可能需要调整解决方案，但总的来说它应该回答您的问题。例如，在每个 row 中使用 align-items-baseline 似乎可以解决原始问题中未阐明的多行问题。 codeply.com/go/whe449Ixtx