| Class | Properties |
|---|---|
| flex-1 | flex: 1 1 0%; |
| flex-auto | flex: 1 1 auto; |
| flex-initial | flex: 0 1 auto; |
| flex-none | flex: none; |
Basic Usage
Initial
Allows a flex item to shrink but not grow, taking into account of its initial size.
<div class="d-flex flex-grow-1 gap-4"> <MudPaper Class="flex-none d-flex py-8 mud-theme-primary" Width="64px" Elevation="0"/> <MudPaper Class="flex-initial d-flex py-8 mud-theme-primary" Width="40%" Elevation="0"/> <MudPaper Class="flex-initial d-flex py-8 mud-theme-primary" Width="25%" Elevation="0"/> </div>
Flex 1
Allows a flex item to grow and shrink as needed and ignores its initial size.
<div class="d-flex flex-grow-1 gap-4"> <MudPaper Class="flex-none d-flex py-8 mud-theme-primary" Width="64px" Elevation="0"/> <MudPaper Class="flex-1 d-flex py-8 mud-theme-primary" Elevation="0"/> <MudPaper Class="flex-1 d-flex py-8 mud-theme-primary" Elevation="0"/> </div>
Auto
Allows a flex item to grow and shrink as needed and taking its initial size into account.
<div class="d-flex flex-grow-1 gap-4"> <MudPaper Class="flex-none d-flex py-8 mud-theme-primary" Width="64px" Elevation="0"/> <MudPaper Class="flex-auto d-flex py-8 mud-theme-primary" Width="40%" Elevation="0"/> <MudPaper Class="flex-auto d-flex py-8 mud-theme-primary" Width="20%" Elevation="0"/> </div>
None
Prevents a flex item from growing or shrinking
<div class="d-flex flex-grow-1 gap-4"> <MudPaper Class="flex-none d-flex py-8 mud-theme-primary" Width="64px" Elevation="0"/> <MudPaper Class="flex-none d-flex py-8 mud-theme-primary" Width="256px" Elevation="0"/> <MudPaper Class="flex-1 d-flex py-8 mud-theme-primary" Elevation="0"/> </div>
Applying conditionally
Breakpoints
You can use the utility class to target media queries like responsive breakpoints.
For example, use flex-md-1 to apply the flex-1 utility at only medium screen sizes and above.
<div class="...flex-md-1"> ... </div>
To learn more, check out the documentation on Breakpoints and other modifiers you can use.