MudBlazor - Blazor Component Library

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.

Flex Direction