Flexbox

Flex Grow

Utilities for controls how flex items grow.


Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
flex-grow-0flex-grow: 0
flex-grow-1flex-grow: 1
flex-grow-2flex-grow: 2
flex-grow-3flex-grow: 3
flex-grow-4flex-grow: 4
flex-grow-5flex-grow: 5
flex-grow-6flex-grow: 6

Usage

1
2
3
<div class="flex">
<div class="flex-grow-1">
...
</div>
<div class="flex-grow-4">
...
</div>
<div class="flex-grow-1">
...
</div>
</div>
HTML
.dummy-parent {
@extend
.flex;
}
.dummy-child {
@extend
.flex-grow-1;
}
.dummy-child-grow {
@extend
.flex-grow-P4;
}
HTML