如何在垂直内容之间留出空间?在示例中,在第三列中,我希望能够在不指定高度的情况下在红色和黑色 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>
最佳答案
Align-items center 在 .d-flex align-items-center
处取消了它
两种选择:
1) 添加 align-self: stretch
到第三个 flexed block 。
2) 删除align-items: center
并添加align-self: center
到第一个 block 。
关于html - Flexbox 列垂直间距不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55425598/