Enable Flex

Quickly manage the layout and sizing of your items.

Class Properties
d-flex display: flex;
d-inline-flex display: inline-flex;
Enabling Flexbox

With the display classes, you can turn any element into a flex container. Doing so will transform the child elements into flex items.

I'm a flexbox container.
I'm a flexbox container.
I'm an inline flexbox container.
I'm an inline flexbox container.
<MudPaper Class="d-flex pa-4">
    I'm a flexbox container.
</MudPaper>
<MudPaper Class="d-flex pa-4">
    I'm a flexbox container.
</MudPaper>
<MudPaper Class="d-inline-flex pa-4">
    I'm an inline flexbox container.
</MudPaper>
<MudPaper Class="d-inline-flex pa-4">
    I'm an inline flexbox container.
</MudPaper>
Applying conditionally
Breakpoints

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

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