证明在父flex中不起作用的内容答案

【问题标题】：justify content between doesnt work in parent flex证明在父flex中不起作用的内容
【发布时间】：2020-12-16 07:23:27
【问题描述】：

我使用flex display parent of flex display 添加div。

HTML：

<div class="d-flex align-items-start flex-column" style="height: 100px;">
  start
</div>
<div class="d-flex align-items-end flex-column" style="height: 100px;">
  <div class="d-flex justify-content-between align-content-center">
    <div>
      left
    </div>
    <div>
      right
    </div>
  </div>
</div>

在行动中，我需要在left 和right 中显示两个div，因此添加justify-content-between 类，但是这个类不起作用并且不会在左右显示。如何解决这个问题？！

演示here

【问题讨论】：

只需从父子https://jsfiddle.net/qLmg4wc8/删除 align-items-end

标签： css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

你需要从“left and right”的父div中删除“align-items-end”才可以工作。

已编辑：

对此的解释是，如果您在父 div 上使用 d-flex 以及“align-items-end”，那么会发生的情况是父 div 会将所有项目与父 div 的 flex 端对齐，所以在在这种情况下，父 div 内的项目与父 div 的 flex 的“end”对齐，而“justify-content-between”不起作用，因为这些项目卡在了父 div 的“flex”端。希望这可以帮助。谢谢。

【讨论】：

这更像是一个评论而不是一个答案
我知道，但我无法将 cmets 添加到问题中，因为我没有 50 名声望。
请在您的答案中添加一些解释，以便其他人可以从中学习

【解决方案2】：

<div class="d-flex align-items-start flex-column" style="height: 100px;">
  start
</div>
<div class="d-flex justify-content-between align-content-center" style="height: 100px;">
  <div>
    left
  </div>
  <div>
    right
  </div>
 </div>

【讨论】：