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

class	css
flex-grow-0	flex-grow: 0
flex-grow-1	flex-grow: 1
flex-grow-2	flex-grow: 2
flex-grow-3	flex-grow: 3
flex-grow-4	flex-grow: 4
flex-grow-5	flex-grow: 5
flex-grow-6	flex-grow: 6

Usage

<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