Class | Properties |
---|---|
align-self-auto | align-self: auto; |
align-self-center | align-self: center; |
align-self-end | align-self: flex-end; |
align-self-start | align-self: flex-start; |
align-self-stretch | align-self: stretch; |
Basic Usage
Start
<MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0"> <MudPaper Class="py-16 flex-1 mud-theme-primary"/> <MudPaper Class="align-self-start py-4 flex-1 mud-theme-primary"/> <MudPaper Class="py-16 flex-1 mud-theme-primary"/> </MudPaper>
Center
<MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0"> <MudPaper Class="py-16 flex-1 mud-theme-primary"/> <MudPaper Class="align-self-center py-4 flex-1 mud-theme-primary"/> <MudPaper Class="py-16 flex-1 mud-theme-primary"/> </MudPaper>
End
<MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0"> <MudPaper Class="py-16 flex-1 mud-theme-primary"/> <MudPaper Class="align-self-end py-4 flex-1 mud-theme-primary"/> <MudPaper Class="py-16 flex-1 mud-theme-primary"/> </MudPaper>
Stretch
<MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0"> <MudPaper Class="py-16 flex-1 mud-theme-primary"/> <MudPaper Class="align-self-stretch py-4 flex-1 mud-theme-primary"/> <MudPaper Class="py-16 flex-1 mud-theme-primary"/> </MudPaper>
Applying conditionally
Breakpoints
You can use the utility class to target media queries like responsive breakpoints.
For example, use align-self-md-end
to apply the align-self-end
utility at only medium screen sizes and above.
<div class="...align-self-md-end"> ... </div>
To learn more, check out the documentation on Breakpoints and other modifiers you can use.