Difference between flex-fill and flex-grow-1 in Bootstrap

user_11455105 0
Viewed 1021

What is the difference between flex-fill and flex-grow-1 in Bootstrap 4+?

From the documentation, flex-fill says:

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.

Is flex-fill always intended to be only used on multiple sibling elements?

And flex-grow says:

Grow and shrink

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

In the following code snippet, both flex-grow-1 and flex-fill seem to be doing the same thing which is to expand the element to take up any positive free space:

<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>

Are flex-fill and flex-grow-1 always interchangeable? Or do they have specific use cases?

bootstrap-5 flexbox twitter-bootstrap css
1 Answers

flex-grow-1 is only setting flex-grow:1 therefore has no impact on flex-basis or flex-shrink.

whereas, flex-fill is setting...

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

or shorthand,

flex: 1 1 auto;

Effectively, flex: 1 1 auto; and flex-grow: 1 are the same. This is because of the way flexbox works by default. Therefore, flex-fill and flex-grow-1 can be used interchangeably.

However, Bootstrap created different classes for "grow" and "shrink" so that they can be used oppositionally within the same flex parent. Additionally, the other "grow" and "shrink" classes can used to switch between 1 and 0, whereas flex-fill is strictly for flex-grow: 1.

user_1714560
Related