Enabling Flexbox
With the display classes you can turn any element into a flex container. Doing so will transform the childelements into flex items.
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 can be changed where you need it.
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.
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.
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.
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.
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 Wrap
By default d-flex
does not provide any wrapping. This can be done with applying the wrap classes.
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.
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 have calsses to apply grow and shrink manually. Where grow
and shrink
can be either 0
or 1
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