It sizes the item based on its content and size, but makes it flexible so that they fill any extra space. Shorthand class .flex-fill
<div class="flex">
<div class="flex-fill">1. ...</div>
<div class="flex-fill">2. ...</div>
<div class="flex-fill">3. ...</div>
</div>Allow flex item to share equal space. Use shorthand class .flex-equal
<div class="flex">
<div class="flex-equal">1. ...</div>
<div class="flex-equal">2. ...</div>
<div class="flex-equal">3. ...</div>
</div>Allow flex item to to grow and consume maximum space. Use shorthand class .flex-grow-1
<div class="flex">
<div class="flex-grow-1">Block 1</div>
<div class="...">Block 2</div>
<div class="...">Block 3</div>
</div>Prevent flex item to to grow. Use shorthand class .flex-grow-0
<div class="flex">
<div class="flex-grow-0">Block 1</div>
<div class="flex-grow-1">Block 2</div>
<div class="flex-grow-1">Block 3</div>
</div>.flex-shrink-0 Prevents flex item to shrink. And .flex-shrink-1 Allow flex item to shrink and consume minimum space. This is the default behavior of flex item.
<div class="flex">
<div class="flex-shrink-0">...</div>
<div class="flex-shrink-1">...</div>
<div class="flex-shrink-0">...</div>
</div>