Align Self

Controlling how an individual flex or grid item is positioned along its container's cross axis.

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.

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.1

An unhandled error has occurred. Reload 🗙