Flex Grow

Utilities for controlling how flex items grow.

Class Properties
flex-grow-0 flex-grow: 0;
flex-grow-1 flex-grow: 1;
Basic Usage
Grow

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

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

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

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

An unhandled error has occurred. Reload 🗙