Flex

Utilities for controlling how flex items both grow and shrink.

Class Properties
flex-1 flex: 1 1 0%;
flex-auto flex: 1 1 auto;
flex-initial flex: 0 1 auto;
flex-none flex: none;
Basic Usage
Initial

Allows a flex item to shrink but not grow, taking into account of its initial size.

<div class="d-flex flex-grow-1 gap-4">
    <MudPaper Class="flex-none d-flex py-8 mud-theme-primary" Width="64px" Elevation="0"/>
    <MudPaper Class="flex-initial d-flex py-8 mud-theme-primary" Width="40%" Elevation="0"/>
    <MudPaper Class="flex-initial d-flex py-8  mud-theme-primary" Width="25%" Elevation="0"/>
</div>
Flex 1

Allows a flex item to grow and shrink as needed and ignores its initial size.

<div class="d-flex flex-grow-1 gap-4">
    <MudPaper Class="flex-none d-flex py-8 mud-theme-primary" Width="64px" Elevation="0"/>
    <MudPaper Class="flex-1 d-flex py-8 mud-theme-primary" Elevation="0"/>
    <MudPaper Class="flex-1 d-flex py-8  mud-theme-primary" Elevation="0"/>
</div>
Auto

Allows a flex item to grow and shrink as needed and taking its initial size into account.

<div class="d-flex flex-grow-1 gap-4">
    <MudPaper Class="flex-none d-flex py-8 mud-theme-primary" Width="64px" Elevation="0"/>
    <MudPaper Class="flex-auto d-flex py-8 mud-theme-primary" Width="40%" Elevation="0"/>
    <MudPaper Class="flex-auto d-flex py-8  mud-theme-primary" Width="20%" Elevation="0"/>
</div>
None

Prevents a flex item from growing or shrinking

<div class="d-flex flex-grow-1 gap-4">
    <MudPaper Class="flex-none d-flex py-8 mud-theme-primary" Width="64px" Elevation="0"/>
    <MudPaper Class="flex-none d-flex py-8 mud-theme-primary" Width="256px" Elevation="0"/>
    <MudPaper Class="flex-1 d-flex py-8  mud-theme-primary" Elevation="0"/>
</div>
Applying conditionally
Breakpoints

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

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