Flex Direction

Utilities for controlling the direction of flex items.

Class Properties
flex-column flex-direction: column;
flex-column-reverse flex-direction: column-reverse;
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
Basic Usage
Row

<MudPaper Class="d-flex flex-row flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-secondary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-secondary" Width="64px" Height="64px"/>
</MudPaper>
Row reversed

<MudPaper Class="d-flex flex-row-reverse flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-secondary" Width="64px" Height="64px"/>
    <MudPaper Class="mud-theme-secondary" Width="64px" Height="64px"/>
</MudPaper>
Column

<MudPaper Class="d-flex flex-column flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="100%" Height="64px"/>
    <MudPaper Class="mud-theme-secondary" Width="100%" Height="64px"/>
    <MudPaper Class="mud-theme-secondary" Width="100%" Height="64px"/>
</MudPaper>
Column reversed

<MudPaper Class="d-flex flex-column-reverse flex-grow-1 gap-4" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="100%" Height="64px"/>
    <MudPaper Class="mud-theme-secondary" Width="100%" Height="64px"/>
    <MudPaper Class="mud-theme-secondary" Width="100%" Height="64px"/>
</MudPaper>
Applying conditionally
Breakpoints

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

<div class="...flex-md-column">
  ...
</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.3

An unhandled error has occurred. Reload 🗙