Flex Shrink
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
👉
flex
,
direction
,
grow
,
shrink
,
wrap
,
align-items
,
align-self
,
align-content
,
justify-content
,
place-content
,
order
|
Class
|
Properties
|
|---|---|
| flex-shrink-0 | |
| flex-shrink-1 |
Shrink
Use the .flex-grow-1 class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.
1
1
<div class="d-flex bd-highlight">
<div class="flex-grow-1">Flex item</div>
<div class="flex-shrink-1">Flex grow item</div>
<div class="flex-grow-1">Flex item</div>
</div>
Prevent from shrinking
Use .flex-grow-0 utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the .flex-grow-1 elements uses all available space it can, while allowing the remaining two flex items their necessary space.
1
2
<div class="d-flex bd-highlight">
<div class="flex-1">Flex item</div>
<div class="flex-shrink-0">I will stay fixed</div>
<div class="flex-1">Flex item</div>
</div>
Responsive
Responsive variations also exist for each flex-shrink value. Use the .flex-shrink-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing flex-shrink utility.
<div class="flex-shrink-md-0 ..."></div>