Justify Content

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

Class Properties
justify-center justify-content: center;
justify-end justify-content: flex-end;
justify-space-around justify-content: space-around;
justify-space-between justify-content: space-between;
justify-space-evenly justify-content: space-evenly;
justify-start justify-content: flex-start;
Basic Usage
Start

<MudPaper Class="d-flex justify-start flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
</MudPaper>
Center

<MudPaper Class="d-flex justify-center flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
</MudPaper>
End

<MudPaper Class="d-flex justify-end flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
</MudPaper>
Space between

<MudPaper Class="d-flex justify-space-between flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
</MudPaper>
Space around

<MudPaper Class="d-flex justify-space-around flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
</MudPaper>
Applying conditionally
Breakpoints

You can use the utility class to target media queries like responsive breakpoints. For example, use justify-md-center to apply the justify-center utility at only medium screen sizes and above.

<div class="...justify-md-center">
  ...
</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 🗙