如何使 children of flex-column 均匀填充所有可用高度？

Question

Bootstrap 有一个 class flex-fill ，您可以在 flex-row 下使用一系列兄弟姐妹来强制它们均匀地填充行的整个宽度， IE。如果它们的内容不是太大的话，它们将都是相同的宽度。

我想要相同的行为，但在垂直方向上，即。一个flex-column。但是，Bootstrap 似乎不支持 flex-column 的相同弹性行为。 flex-fill 和 flex-grow-1 我都试过了，但似乎都没有任何效果。如果您检查以下代码段，您可以看到两列具有相同的高度，但 4 高的列没有增长以填充剩余的 space.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row">
  <div class="flex-column">
    <div class="flex-fill border border-dark">1/8</div>
    <div class="flex-fill border border-dark">2/8</div>
    <div class="flex-fill border border-dark">3/8</div>
    <div class="flex-fill border border-dark">4/8</div>
    <div class="flex-fill border border-dark">5/8</div>
    <div class="flex-fill border border-dark">6/8</div>
    <div class="flex-fill border border-dark">7/8</div>
    <div class="flex-fill border border-dark">8/8</div>
  </div>
  <div class="flex-column">
    <div class="flex-fill border border-dark">1/4</div>
    <div class="flex-fill border border-dark">2/4</div>
    <div class="flex-fill border border-dark">3/4</div>
    <div class="flex-fill border border-dark">4/4</div>
  </div>
</div>

我假设 Bootstrap 本身不支持这个，但是正常的 flexbox 语法是什么让它们以这种方式均匀地填充可用高度？

Answer 1

只需在列上使用 d-flex 即可设置它们的 display 属性。不是遗传的。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row">
  <div class="d-flex flex-column">
    <div class="flex-fill border border-dark">1/8</div>
    <div class="flex-fill border border-dark">2/8</div>
    <div class="flex-fill border border-dark">3/8</div>
    <div class="flex-fill border border-dark">4/8</div>
    <div class="flex-fill border border-dark">5/8</div>
    <div class="flex-fill border border-dark">6/8</div>
    <div class="flex-fill border border-dark">7/8</div>
    <div class="flex-fill border border-dark">8/8</div>
  </div>
  
  <div class="d-flex flex-column">
    <div class="flex-fill border border-dark">1/4</div>
    <div class="flex-fill border border-dark">2/4</div>
    <div class="flex-fill border border-dark">3/4</div>
    <div class="flex-fill border border-dark">4/4</div>
  </div>
</div>

如何使 children of flex-column 均匀填充所有可用高度？

How can I make children of flex-column evenly fill all available height?

flexbox

twitter-bootstrap

bootstrap-5