证明内容之间的合理性在父级flex中不起作用

问题描述

我使用div显示器的flex显示器父级添加flex。

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>

实际上，我需要在div和left中显示两个right，所以添加justify-content-between类，但是该类不起作用并且不在左右显示。如何解决此问题？！

演示here

解决方法

您需要从“ 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的”末端。希望这可以帮助。谢谢。

,

<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>