Flex - MudBlazor

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 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>

The flex classes also works with the breakpoint system

.d-flex

.d-inline-flex

.d-sm-flex

.d-inline-sm-flex

.d-md-flex

.d-inline-md-flex

.d-lg-flex

.d-inline-lg-flex

.d-xl-flex

.d-inline-xl-flex

Flex Direction

By default, d-flex applies flex-direction: row but this can be changed where you need it.

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

<MudGrid>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex flex-row py-2 px-1">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex flex-row-reverse py-2 px-1">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <div class="d-flex flex-column">
            <MudPaper Class="my-2 pa-4 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="my-2 pa-4 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="my-2 pa-4 mud-theme-info">Flex Item 3</MudPaper>
        </div>
    </MudItem>
    <MudItem xs="12" md="6">
        <div class="d-flex flex-column-reverse">
            <MudPaper Class="my-2 pa-4 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="my-2 pa-4 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="my-2 pa-4 mud-theme-info">Flex Item 3</MudPaper>
        </div>
    </MudItem>
</MudGrid>

Classes and Responsive variations

.flex-row

.flex-row-reverse

.flex-column

.flex-column-reverse

.flex-sm-row

.flex-sm-row-reverse

.flex-sm-column

.flex-sm-column-reverse

.flex-md-row

.flex-md-row-reverse

.flex-md-column

.flex-md-column-reverse

.flex-lg-row

.flex-lg-row-reverse

.flex-lg-column

.flex-lg-column-reverse

.flex-xl-row

.flex-xl-row-reverse

.flex-xl-column

.flex-xl-column-reverse

Flex Justify

The justify-content flex setting can be changed using our flex justify classes.

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

<MudPaper Class="d-flex justify-start py-2 px-1">
    <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
    <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
    <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
</MudPaper>

<MudPaper Class="d-flex justify-end py-2 px-1 mt-6">
    <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
    <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
    <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
</MudPaper>

<MudPaper Class="d-flex justify-center py-2 px-1 mt-6">
    <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
    <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
    <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
</MudPaper>

<MudPaper Class="d-flex justify-space-between py-2 px-1 mt-6">
    <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
    <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
    <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
</MudPaper>

<MudPaper Class="d-flex justify-space-around py-2 px-1 mt-6">
    <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
    <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
    <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
</MudPaper>

Classes and Responsive variations

.justify-start

.justify-end

.justify-center

.justify-space-between

.justify-space-around

.justify-sm-start

.justify-sm-end

.justify-sm-center

.justify-sm-space-between

.justify-sm-space-around

.justify-md-start

.justify-md-end

.justify-md-center

.justify-md-space-between

.justify-md-space-around

.justify-lg-start

.justify-lg-end

.justify-lg-center

.justify-lg-space-between

.justify-lg-space-around

.justify-xl-start

.justify-xl-end

.justify-xl-center

.justify-xl-space-between

.justify-xl-space-around

Flex Align

The align-items flex setting can be changed using the flex align classes.

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

<MudGrid>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-start py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-end py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-center py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-baseline py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex align-stretch py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
</MudGrid>

Classes and Responsive variations

.align-start

.align-end

.align-center

.align-baseline

.align-stretch

.align-sm-start

.align-sm-end

.align-sm-center

.align-sm-baseline

.align-sm-stretch

.align-md-start

.align-md-end

.align-md-center

.align-md-baseline

.align-md-stretch

.align-lg-start

.align-lg-end

.align-lg-center

.align-lg-baseline

.align-lg-stretch

.align-xl-start

.align-xl-end

.align-xl-center

.align-xl-baseline

.align-xl-stretch

Flex Align Self

The align-self flex setting can be changed using the flex align-self classes.

Flex Item

Aligned Flex Item

Flex Item

Aligned Flex Item

Flex Item

Aligned Flex Item

Flex Item

Aligned Flex Item

Flex Item

Aligned Flex Item

Flex Item

Aligned Flex Item

Flex Item

<MudGrid>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 ml-auto mud-theme-primary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary align-self-start">Aligned Flex Item</MudPaper>
            <MudPaper Class="pa-2 mr-auto mud-theme-primary">Flex Item</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 ml-auto mud-theme-primary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary align-self-end">Aligned Flex Item</MudPaper>
            <MudPaper Class="pa-2 mr-auto mud-theme-primary">Flex Item</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 ml-auto mud-theme-primary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary align-self-center">Aligned Flex Item</MudPaper>
            <MudPaper Class="pa-2 mr-auto mud-theme-primary">Flex Item</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 ml-auto mud-theme-primary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary align-self-baseline">Aligned Flex Item</MudPaper>
            <MudPaper Class="pa-2 mr-auto mud-theme-primary">Flex Item</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 ml-auto mud-theme-primary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary align-self-auto">Aligned Flex Item</MudPaper>
            <MudPaper Class="pa-2 mr-auto mud-theme-primary">Flex Item</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex py-2 px-1" Style="height:150px;">
            <MudPaper Class="pa-2 ml-auto mud-theme-primary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary align-self-stretch">Aligned Flex Item</MudPaper>
            <MudPaper Class="pa-2 mr-auto mud-theme-primary">Flex Item</MudPaper>
        </MudPaper>
    </MudItem>
</MudGrid>

Classes and Responsive variations

.align-self-auto

.align-self-start

.align-self-end

.align-self-center

.align-self-baseline

.align-self-stretch

.align-self-sm-auto

.align-self-sm-start

.align-self-sm-end

.align-self-sm-center

.align-self-sm-baseline

.align-self-sm-stretch

.align-self-md-auto

.align-self-md-start

.align-self-md-end

.align-self-md-center

.align-self-md-baseline

.align-self-md-stretch

.align-self-lg-auto

.align-self-lg-start

.align-self-lg-end

.align-self-lg-center

.align-self-lg-baseline

.align-self-lg-stretch

.align-self-xl-auto

.align-self-xl-start

.align-self-xl-end

.align-self-xl-center

.align-self-xl-baseline

.align-self-xl-stretch

Flex Align Content

The align-content flex setting can be changed using the flex align-content classes.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<MudGrid>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-content-start flex-wrap py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">16</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-content-end flex-wrap py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">16</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-content-center flex-wrap py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">16</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-content-space-between flex-wrap py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-secondary" Style="width:36px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-info" Style="width:36px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 mx-2 my-1 mud-theme-primary" Style="width:36px; text-align:center;">16</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex align-content-space-around flex-wrap px-2" Style="height:250px;">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width:79px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width:79px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width:79px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width:79px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width: 79px; text-align: center;">5</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width: 79px; text-align: center;">6</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width: 79px; text-align: center;">7</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width: 79px; text-align: center;">8</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width: 79px; text-align: center;">9</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width: 79px; text-align: center;">10</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width: 79px; text-align: center;">11</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width: 79px; text-align: center;">12</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width: 79px; text-align: center;">13</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width: 79px; text-align: center;">14</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width: 79px; text-align: center;">15</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-primary" Style="width: 79px; text-align: center;">16</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary" Style="width: 79px; text-align: center;">17</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info" Style="width: 79px; text-align: center;">18</MudPaper>
        </MudPaper>
    </MudItem>
</MudGrid>

Classes and Responsive variations

.align-content-start

.align-content-end

.align-content-center

.align-content-stretch

.align-content-space-between

.align-content-space-around

.align-content-sm-start

.align-content-sm-end

.align-content-sm-center

.align-content-sm-stretch

.align-content-sm-space-between

.align-content-sm-space-around

.align-content-md-start

.align-content-md-end

.align-content-md-center

.align-content-md-stretch

.align-content-md-space-between

.align-content-md-space-around

.align-content-lg-start

.align-content-lg-end

.align-content-lg-center

.align-content-lg-stretch

.align-content-lg-space-between

.align-content-lg-space-around

.align-content-xl-start

.align-content-xl-end

.align-content-xl-center

.align-content-xl-stretch

.align-content-xl-space-between

.align-content-xl-space-around

Auto margins

Using our spacing classes together with the flex container, you can control the positioning of flex items.

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

<MudGrid>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex py-2 px-1">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex py-2 px-1">
            <MudPaper Class="pa-2 ml-2 mr-auto mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex py-2 px-1">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 mr-2 ml-auto mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-start flex-column py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 my-1 mx-2 mb-auto mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 my-1 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 my-1 mx-2 mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudPaper Class="d-flex align-end flex-column py-2 px-1" Style="height:200px;">
            <MudPaper Class="pa-2 my-1 mx-2 mud-theme-primary">Flex Item 1</MudPaper>
            <MudPaper Class="pa-2 my-1 mx-2 mud-theme-secondary">Flex Item 2</MudPaper>
            <MudPaper Class="pa-2 my-1 mx-2 mt-auto mud-theme-info">Flex Item 3</MudPaper>
        </MudPaper>
    </MudItem>
</MudGrid>

Flex Wrap

By default, d-flex does not provide any wrapping. This can be done by applying the wrap classes.

Flex Item

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<MudGrid>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex flex-nowrap px-1">
            <MudPaper Class="pa-2 ma-2 mud-theme-primary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info">Flex Item</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary">Flex Item</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info">Flex Item</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex flex-wrap px-1">
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">16</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">17</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">18</MudPaper>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex flex-wrap-reverse px-1">
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">1</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">2</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">3</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">4</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">5</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">6</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">7</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">8</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">9</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">10</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">11</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">12</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">13</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">14</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">15</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-primary" Style="width:75px; text-align:center;">16</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-secondary" Style="width:75px; text-align:center;">17</MudPaper>
            <MudPaper Class="pa-2 ma-2 mud-theme-info" Style="width:75px; text-align:center;">18</MudPaper>
        </MudPaper>
    </MudItem>
</MudGrid>

Classes and Responsive variations

.flex-wrap

.flex-nowrap

.flex-wrap-reverse

.flex-sm-wrap

.flex-sm-nowrap

.flex-sm-wrap-reverse

.flex-md-wrap

.flex-md-nowrap

.flex-md-wrap-reverse

.flex-lg-wrap

.flex-lg-nowrap

.flex-lg-wrap-reverse

.flex-xl-wrap

.flex-xl-nowrap

.flex-xl-wrap-reverse

Flex Order

To change the visual order of flex items, use the order classes.

First Flex Item

Second Flex Item

Third Flex Item

<MudGrid>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex py-2 px-1">
            <MudPaper Class="pa-2 mx-2 mud-theme-primary order-3">First Flex Item</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-secondary order-2">Second Flex Item</MudPaper>
            <MudPaper Class="pa-2 mx-2 mud-theme-info order-1">Third Flex Item</MudPaper>
        </MudPaper>
    </MudItem>
</MudGrid>

Classes and Responsive variations

.order-first

.order-0

.order-1

.order-2

.order-3

.order-4

.order-5

.order-6

.order-7

.order-8

.order-9

.order-10

.order-11

.order-12

.order-last

.order-sm-first

.order-sm-0

.order-sm-1

.order-sm-2

.order-sm-3

.order-sm-4

.order-sm-5

.order-sm-6

.order-sm-7

.order-sm-8

.order-sm-9

.order-sm-10

.order-sm-11

.order-sm-12

.order-sm-last

.order-md-first

.order-md-0

.order-md-1

.order-md-2

.order-md-3

.order-md-4

.order-md-5

.order-md-6

.order-md-7

.order-md-8

.order-md-9

.order-md-10

.order-md-11

.order-md-12

.order-md-last

.order-lg-first

.order-lg-0

.order-lg-1

.order-lg-2

.order-lg-3

.order-lg-4

.order-lg-5

.order-lg-6

.order-lg-7

.order-lg-8

.order-lg-9

.order-lg-10

.order-lg-11

.order-lg-12

.order-lg-last

.order-xl-first

.order-xl-0

.order-xl-1

.order-xl-2

.order-xl-3

.order-xl-4

.order-xl-5

.order-xl-6

.order-xl-7

.order-xl-8

.order-xl-9

.order-xl-10

.order-xl-11

.order-xl-12

.order-xl-last

Flex Grow and Shrink

MudBlazor has classes to apply grow and shrink manually, where grow and shrink can be either 0 or 1.

First Flex Item

Second Flex Item

Third Flex Item

<MudGrid>
    <MudItem xs="12" md="12">
        <MudPaper Class="d-flex py-2 px-1">
            <MudPaper Class="flex-grow-0 flex-shrink-0 pa-2 mx-2 mud-theme-primary order-3">First Flex Item</MudPaper>
            <MudPaper Class="flex-grow-1 flex-shrink-0 pa-2 mx-2 mud-theme-secondary order-2">Second Flex Item</MudPaper>
            <MudPaper Class="flex-grow-0 flex-shrink-1 pa-2 mx-2 mud-theme-info order-1">Third Flex Item</MudPaper>
        </MudPaper>
    </MudItem>
</MudGrid>

Classes and Responsive variations

.flex-grow-0

.flex-grow-1

.flex-shrink-0

.flex-shrink-1

.flex-sm-grow-0

.flex-sm-grow-1

.flex-sm-shrink-0

.flex-sm-shrink-1

.flex-md-grow-0

.flex-md-grow-1

.flex-md-shrink-0

.flex-md-shrink-1

.flex-lg-grow-0

.flex-lg-grow-1

.flex-lg-shrink-0

.flex-lg-shrink-1

.flex-xl-grow-0

.flex-xl-grow-1

.flex-xl-shrink-0

.flex-xl-shrink-1