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

Question

如何在垂直内容之间留出空格？在示例中，在第三列中，我希望能够在不指定高度的情况下证明红色和黑色 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/

标签： htmlcssflexboxbootstrap-4

Answer 1

Align-items center 将其丢弃在.d-flex align-items-center

两种选择：

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

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