Flex Wrap

Controlling how flex items wrap.

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.

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.3

An unhandled error has occurred. Reload 🗙