| Class | Properties |
|---|---|
| flex-shrink-0 | flex-shrink: 0; |
| flex-shrink-1 | flex-shrink: 1; |
Basic Usage
Shrink
<div class="d-flex flex-grow-1 gap-4"> <MudPaper Class="flex-none py-8 mud-theme-primary" Width="64px" Elevation="0"/> <MudPaper Class="flex-shrink-1 py-8 mud-theme-primary" Width="100%" Elevation="0"/> <MudPaper Class="flex-none py-8 mud-theme-primary" Width="64px" Elevation="0"/> </div>
No shrink
<div class="d-flex flex-grow-1 gap-4"> <MudPaper Class="flex-1 mud-theme-primary" Width="64px" Elevation="0"/> <MudPaper Class="flex-shrink-0 py-8 mud-theme-primary" Width="128px" Elevation="0"/> <MudPaper Class="flex-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-shrink-1 to apply the flex-shrink-1 utility at only medium screen sizes and above.
<div class="...flex-md-shrink-1"> ... </div>
To learn more, check out the documentation on Breakpoints and other modifiers you can use.