Flex
A collection of classes are provided for both flex containers and flex items.
Note: this page is best viewed on a tablet or desktop.
Flex container classes
Flex direction
.flex-row
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
flex item 8
.flex-col
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
flex item 8
.flex-row-reverse
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
flex item 8
.flex-col-reverse
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
flex item 8
Flex wrap
.flex-wrap
flex item 1
flex item 2
flex item 3
flex item 4
.flex-wrap-reverse
flex item 1
flex item 2
flex item 3
flex item 4
.flex-nowrap
flex item 1
flex item 2
flex item 3
flex item 4
Justify Content
.justify-start
flex item 1
flex item 2
flex item 3
flex item 4
.justify-center
flex item 1
flex item 2
flex item 3
flex item 4
.justify-end
flex item 1
flex item 2
flex item 3
flex item 4
.justify-between
flex item 1
flex item 2
flex item 3
flex item 4
.justify-around
flex item 1
flex item 2
flex item 3
flex item 4
.justify-evenly
flex item 1
flex item 2
flex item 3
flex item 4
Align Items
.align-start
flex item 1
flex item 2
flex item 3
flex item 4
.align-center
flex item 1
flex item 2
flex item 3
flex item 4
.align-end
flex item 1
flex item 2
flex item 3
flex item 4
.align-stretch
flex item 1
flex item 2
flex item 3
flex item 4
Flex children classes
Align Self
flex item 1
.align-self-stretch
(default)flex item 2
.align-self-start
flex item 3
.align-self-center
flex item 4
.align-self-end
Order
flex item 1
.order-1
flex item 2
.order-2
flex item 3
.order-0
(default)flex item 4
.order-0
(default)