Blazorise Flex Utilities

Build flexible layouts with a fluent API for direction, alignment, wrapping, and responsive adjustments.

Flex utilities let you express layout intent in C# while keeping rules consistent across CSS providers. Use them to align content, distribute space, and control wrapping without custom CSS.

How it works

Set the Flex parameter on a container and chain rules such as Flex.Row, Flex.Column, Flex.JustifyContent.Center, and Flex.AlignItems.Start. Add breakpoints like OnTablet or OnDesktop to adapt layout per screen size.

Examples

Align items

Align items along the cross axis to keep components visually balanced without adding extra wrapper styles. This is especially useful for mixed-height content such as buttons and text.

The last block switches to a column layout so you can see how cross-axis alignment affects horizontal positioning.

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

<Div Flex="Flex.AlignItems.Start" Margin="Margin.Is3.FromBottom" Style="@alignItemsFlexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.AlignItems.End" Margin="Margin.Is3.FromBottom" Style="@alignItemsFlexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.AlignItems.Center" Margin="Margin.Is3.FromBottom" Style="@alignItemsFlexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.AlignItems.Baseline" Margin="Margin.Is3.FromBottom" Style="@alignItemsFlexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.AlignItems.Stretch" Margin="Margin.Is3.FromBottom" Style="@alignItemsFlexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.Column.AlignItems.Center" Margin="Margin.Is3.FromBottom" Style="@alignItemsColumnFlexContainerStyle">
    <Div Padding="Padding.Is2" Width="Width.Rem( 8 )" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Width="Width.Rem( 8 )" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Width="Width.Rem( 8 )" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>

@code {
    const string ContainerBackgroundColor = "rgba(165, 181, 167,.15)";
    const string ContainerBorderColor = "rgba(165, 181, 167,.15)";

    const string ItemBackgroundColor = "rgba(95, 163, 103,.15)";
    const string ItemBorderColor = "rgba(95, 163, 103,.15)";

    string flexContainerStyle = $"background-color: {ContainerBackgroundColor};border: 1px solid {ContainerBorderColor};";
    string alignItemsFlexContainerStyle = $"background-color: {ContainerBackgroundColor};border: 1px solid {ContainerBorderColor};height: 100px;";
    string alignItemsColumnFlexContainerStyle = $"background-color: {ContainerBackgroundColor};border: 1px solid {ContainerBorderColor};height: 140px;width: 240px;";

    string flexItemStyle = $"background-color: {ItemBackgroundColor}; border: 1px solid {ItemBorderColor};";
}

Justify content

Distribute items along the main axis to create consistent spacing and alignment. This helps you keep layouts responsive while avoiding manual margin tweaks.

The column example demonstrates vertical distribution inside a fixed-height container.

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

<Div Flex="Flex.JustifyContent.Start" Margin="Margin.Is3.FromBottom" Style="@flexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.JustifyContent.End" Margin="Margin.Is3.FromBottom" Style="@flexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.JustifyContent.Center" Margin="Margin.Is3.FromBottom" Style="@flexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.JustifyContent.Between" Margin="Margin.Is3.FromBottom" Style="@flexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.JustifyContent.Around" Margin="Margin.Is3.FromBottom" Style="@flexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>
<Div Flex="Flex.Column.JustifyContent.Between" Margin="Margin.Is3.FromBottom" Style="@alignItemsFlexContainerStyle">
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 1
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 2
    </Div>
    <Div Padding="Padding.Is2" Style="@flexItemStyle">
        Flex item 3
    </Div>
</Div>

@code {
    const string ContainerBackgroundColor = "rgba(165, 181, 167,.15)";
    const string ContainerBorderColor = "rgba(165, 181, 167,.15)";

    const string ItemBackgroundColor = "rgba(95, 163, 103,.15)";
    const string ItemBorderColor = "rgba(95, 163, 103,.15)";

    string flexContainerStyle = $"background-color: {ContainerBackgroundColor};border: 1px solid {ContainerBorderColor};";
    string alignItemsFlexContainerStyle = $"background-color: {ContainerBackgroundColor};border: 1px solid {ContainerBorderColor};height: 100px;";

    string flexItemStyle = $"background-color: {ItemBackgroundColor}; border: 1px solid {ItemBorderColor};";
}

Blazorise Flex Utilities

How it works

Examples

Align items

Justify content

On this page