Align Items

Controlling how flex and grid items are positioned along a container's cross axis.

Class Properties
align-baseline align-items: baseline;
align-center align-items: center;
align-end align-items: flex-end;
align-start align-items: flex-start;
align-stretch align-items: stretch;
Basic Usage
Start

<MudPaper Class="d-flex align-start flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-8 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-12 d-flex flex-1 mud-theme-primary"/>
</MudPaper>
Center

<MudPaper Class="d-flex align-center flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-4 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-8 d-flex flex-1 mud-theme-primary"/>
</MudPaper>
End

<MudPaper Class="d-flex align-end flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-4 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-8 d-flex flex-1 mud-theme-primary"/>
</MudPaper>
Baseline

<MudPaper Class="d-flex align-baseline flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="pt-4 pb-12 d-flex flex-1 mud-theme-primary"><MudPaper Square="true" Elevation="0" Height="4px" Width="100%"/></MudPaper>
    <MudPaper Class="pt-16 pb-16 d-flex flex-1 mud-theme-primary"><MudPaper Square="true" Elevation="0" Height="4px" Width="100%"/></MudPaper>
    <MudPaper Class="pt-12 pb-4 d-flex flex-1 mud-theme-primary"><MudPaper Square="true" Elevation="0" Height="4px" Width="100%"/></MudPaper>
</MudPaper>
Stretch

<MudPaper Class="d-flex align-stretch flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="py-4 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-16 d-flex flex-1 mud-theme-primary"/>
    <MudPaper Class="py-8 d-flex 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-md-end to apply the align-end utility at only medium screen sizes and above.

<div class="...align-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.5

An unhandled error has occurred. Reload 🗙