Can you explain to me what sets apart the flex-fill and flex-grow-1 classes in Bootstrap 4+?
According to the documentation,
flex-fill is defined as:
Fill
When applied to sibling elements, the
.flex-fillclass ensures that they occupy widths equal to their content, utilizing all available horizontal space.
Is the use of flex-fill limited to multiple sibling elements only?
On the other hand, flex-grow is described as:
Grow and shrink
By using
.flex-grow-*utilities, you can control a flex item's ability to expand and fill available space.
In the provided code snippet, both flex-grow-1 and flex-fill appear to have a similar function of expanding elements to occupy any available space:
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeedeabb0afb0ae">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2978c938c92">[email protected]</a>/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>Do you think flex-fill and flex-grow-1 are always interchangeable? Or are there specific scenarios where one is more suitable than the other?