Class | Properties |
---|---|
align-content-center | align-content: center; |
align-content-end | align-content: flex-end; |
align-content-space-around | align-content: space-around; |
align-content-space-between | align-content: space-between; |
align-content-start | align-content: flex-start; |
align-content-stretch | align-content: stretch; |
Basic Usage
Start
<MudPaper Class="d-flex align-content-start flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0"> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> </MudPaper>
Center
<MudPaper Class="d-flex align-content-center flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0"> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> </MudPaper>
End
<MudPaper Class="d-flex align-content-end flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0"> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> </MudPaper>
Space between
<MudPaper Class="d-flex align-content-space-between flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0"> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> </MudPaper>
Space around
<MudPaper Class="d-flex align-content-space-around flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0"> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/> </MudPaper>
Applying conditionally
Breakpoints
You can use the utility class to target media queries like responsive breakpoints.
For example, use align-content-md-end
to apply the align-content-end
utility at only medium screen sizes and above.
<div class="...align-content-md-end"> ... </div>
To learn more, check out the documentation on Breakpoints and other modifiers you can use.