MudBlazor - Blazor Component Library

Class	Properties
flex-nowrap	flex-wrap: nowrap;
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;

Basic Usage

Wrap

<MudPaper Class="d-flex flex-wrap gap-4" MaxWidth="528px" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="256px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="256px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="256px" Height="64px"/>
</MudPaper>

Wrap reversed

<MudPaper Class="d-flex flex-wrap-reverse gap-4" MaxWidth="528px" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="256px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="256px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="256px" Height="64px"/>
</MudPaper>

No wrap

<MudPaper Class="d-flex flex-nowrap gap-4 overflow-auto" MaxWidth="560px" Elevation="0">
    <MudPaper Class="flex-none mud-theme-primary" Width="256px" Height="64px"/>
    <MudPaper Class="flex-none mud-theme-primary" Width="256px" Height="64px"/>
    <MudPaper Class="flex-none mud-theme-primary" Width="256px" Height="64px"/>
</MudPaper>

Applying conditionally

Breakpoints

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

<div class="...flex-md-wrap">
  ...
</div>

To learn more, check out the documentation on Breakpoints and other modifiers you can use.

Flex Wrap