| Class | Properties |
|---|---|
| flex-grow-0 | flex-grow: 0; |
| flex-grow-1 | flex-grow: 1; |
Basic Usage
Grow
<div class="d-flex flex-grow-1 gap-4"> <MudPaper Class="py-8 mud-theme-primary" Width="64px" Elevation="0"/> <MudPaper Class="flex-grow-1 py-8 mud-theme-primary" Width="64px" Elevation="0"/> <MudPaper Class="py-8 mud-theme-primary" Width="64px" Elevation="0"/> </div>
No grow
<div class="d-flex flex-grow-1 gap-4"> <MudPaper Class="flex-grow-1 py-8 mud-theme-primary" Width="64px" Elevation="0"/> <MudPaper Class="flex-grow-0 py-8 mud-theme-primary" Width="64px" Elevation="0"/> <MudPaper Class="flex-grow-1 py-8 mud-theme-primary" Width="64px" Elevation="0"/> </div>
Applying conditionally
Breakpoints
You can use the utility class to target media queries like responsive breakpoints.
For example, use flex-md-grow-1 to apply the flex-grow-1 utility at only medium screen sizes and above.
<div class="...flex-md-grow-1"> ... </div>
To learn more, check out the documentation on Breakpoints and other modifiers you can use.