css - Bootstrap 中 flex-fill 和 flex-grow-1 的区别

Question

Bootstrap 4+ 中的 flex-fill 和 flex-grow-1 有什么区别？

---

从文档中， flex-fill说:

Fill

Use the .flex-fill class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

flex-fill 是否总是打算仅用于多个同级元素？

---

和flex-grow说:

Grow and shrink

Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.

---

在下面的代码片段中，flex-grow-1 和 flex-fill 似乎都在做同样的事情，即扩展元素以占据任何正自由空间:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container border border-primary m-4 p-4">
    <h3>Default</h3>
    <div class="d-flex">
        <p class="border border-dark">This is some sample text.</p>
        <p><span class="badge bg-danger rounded-pill">1000</p>
    </div>
    <h3>With <code>.flex-fill</code></h3>
    <div class="d-flex">
        <p class="flex-fill border border-dark">This is some sample text.</p>
        <p><span class="badge bg-danger rounded-pill">1000</p>
    </div>
    <h3>With <code>.flex-grow-1</code></h3>
    <div class="d-flex">
        <p class="flex-grow-1 border border-dark">This is some sample text.</p>
        <p><span class="badge bg-danger rounded-pill">1000</p>
    </div>
</div>

flex-fill 和 flex-grow-1 是否总是可以互换的？或者他们有特定的用例吗？

Answer 1

flex-grow-1 仅设置 flex-grow:1因此对 flex-basis 或 flex-shrink 没有影响。

然而，flex-fill 正在设置...

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

或简写，

flex: 1 1 auto;

实际上，flex: 1 1 auto;和 flex-grow: 1是相同的。这是因为 flexbox 默认的工作方式。因此，flex-fill和 flex-grow-1可以互换使用。

但是，Bootstrap 为“增长”和“收缩”创建了不同的类，以便它们可以在同一个 flex 父级中相反地使用。此外，其他“增长”和“收缩”类可用于在 1 和 0 之间切换，而 flex-fill严格适用于 flex-grow: 1 .