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

Align-items center 在 .d-flex align-items-center 处取消了它

两种选择:

1) 添加 align-self: stretch 到第三个 flexed block 。

2) 删除align-items: center 并添加align-self: center 到第一个 block 。