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

Question

flex-fillBootstrap 4+ 中和之间有什么区别flex-grow-1？

\n

---

\n

从文档中，\nflex-fill说：

\n

\n

充满

\n

在一系列同级元素上使用该类.flex-fill，强制它们的宽度等于其内容（或者，如果它们的内容不超过其边框框，则宽度相等），同时占用所有可用的水平空间。

\n

\n

是否flex-fill始终仅用于多个同级元素？

\n

---

\n

并flex-grow说：

\n

\n

增长和收缩

\n

使用.flex-grow-*实用程序切换弹性项目\xe2\x80\x99 增长以填充可用空间的能力。

\n

\n

---

\n

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

\n

\r\n

\r\n

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>\n<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>\n\n<div class="container border border-primary m-4 p-4">\n    <h3>Default</h3>\n    <div class="d-flex">\n        <p class="border border-dark">This is some sample text.</p>\n        <p><span class="badge bg-danger rounded-pill">1000</p>\n    </div>\n    <h3>With <code>.flex-fill</code></h3>\n    <div class="d-flex">\n        <p class="flex-fill border border-dark">This is some sample text.</p>\n        <p><span class="badge bg-danger rounded-pill">1000</p>\n    </div>\n    <h3>With <code>.flex-grow-1</code></h3>\n    <div class="d-flex">\n        <p class="flex-grow-1 border border-dark">This is some sample text.</p>\n        <p><span class="badge bg-danger rounded-pill">1000</p>\n    </div>\n</div>

\r\n

\r\n

\r\n

\n

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

\n

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 父级中相反地使用。此外，其他“grow”和“shrink”类可用于在 1 和 0 之间切换，而 则flex-fill严格用于flex-grow: 1.