Flexbox 列垂直间距 - 之间不起作用答案

【问题标题】：Flexbox column vertical space-between not workingFlexbox 列垂直间距 - 之间不起作用
【发布时间】：2019-08-20 21:02:38
【问题描述】：

如何在垂直内容之间设置空格？在示例中，在第三列中，我希望能够在不指定高度的情况下证明红色和黑色 div 之间的内容（目前在这里举个例子）。没有它我不能这样做吗，因为我们已经从中间 col 有了一个最大高度？

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

【问题讨论】：

AFAIK，您必须为特定容器定义高度

标签： html css flexbox bootstrap-4

【解决方案1】：

Align-items center 在.d-flex align-items-center 上扔了它

两个选项：

1) 将align-self: stretch 添加到第三个弯曲块中。

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

【讨论】：