Flexbox列之间的垂直间距不起作用

Question

如何在垂直内容之间隔开？在示例中，我希望在第三列中能够在不指定高度的情况下在红色和黑色div之间证明内容的合理性（当前这里是一个示例）。因为我们已经有一个从中间列开始的最大高度了，所以我不能没有它吗？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex align-items-center">
  <div class="col-auto">
    <div>asdqwd</div>
  </div>
  <div class="col d-flex flex-column text-center">
    <div>rgergre</div>
    <div>vs</div>
    <div>rger ergerg</div>
  </div>
  <div class="col-auto d-flex flex-column justify-content-between" style="height:72px">
    <div style="height:20px;width:20px;background:red">ewf</div>
    <div style="height:20px;width:20px;background:black">qwd</div>
  </div>
</div>

https://jsfiddle.net/xmkrt21j/2/

Answer 1

对齐项中心在.d-flex align-items-center处扔掉

两个选项：

1）将align-self: stretch添加到第三个弹性块中。

2）删除align-items: center并将align-self: center添加到第一块。