小屏幕上 3 个 div 的不同 flexbox 对齐方式答案

【问题标题】：Different flexbox alignment on small screen for 3 divs小屏幕上 3 个 div 的不同 flexbox 对齐方式
【发布时间】：2019-07-25 05:13:56
【问题描述】：

基本上我需要 3 个 div 来对齐小宽度（576px），如下图底部。

如何使用引导 flexbox 类来实现？

我假设基集是：

<div class="d-flex">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

我没有看到 .column 和 .row 类被使用，因为 A 和 B 在大小屏幕上不共享相同的 div...尝试了不同的类但没有成功。

【问题讨论】：

【解决方案1】：

用于对齐图像的顶部。在 flexbox 容器上使用 align-content 实用程序将 flex 项在交叉轴上对齐。你可以选择

<div class="d-flex align-content-start flex-wrap">...</div>

对于图片的内容顶部和底部你可以选择

<div class="d-flex align-content-end flex-wrap">...</div>

在这里，我假设图像会在不同的<div> 中，对于响应行为，您可以使用 .order 类

【讨论】：