Flex Behaviors

This is flex container, uses the 'd-flex' class

This is inline flexbox container, uses the 'd-inline-flex' class


Direction

Horizontal Direction

flex-row: Item 1
flex-row: Item 2
flex-row: Item 3
flex-row-reverse: Item 1
flex-row-reverse: Item 2
flex-row-reverse: Item 3

Vertical Direction

flex-column: Item 1
flex-column: Item 2
flex-column: Item 3
flex-column-reverse: Item 1
flex-column-reverse: Item 2
flex-column-reverse: Item 3

Alignment - Start

Item 1
Item 2
Item 3

Alignment - End

Item 1
Item 2
Item 3

Alignment - Center

Item 1
Item 2
Item 3

Alignment - Between

Item 1
Item 2
Item 3

Alignment - Around

Item 1
Item 2
Item 3

Align Items - Start

Item 1
Item 2
Item 3

Align Items - End

Item 1
Item 2
Item 3

Align Items - Center

Item 1
Item 2
Item 3

Align Items - Baseline

Item 1
Item 2
Item 3

Align Items - Stretch

Item 1
Item 2
Item 3

Fill

Item 1
Item 2
Item 3

Grow

Item 1 (Using class flex-grow-1)
Item 2
Item 3

Shrink

Item 1
Item 2 (Using class flex-shrink-1)

Auto Margins

Item 1
Item 2
Item 3
mr-auto: Item 1
Item 2
Item 3
Item 1
Item 2
ml-auto: Item 3

With align-items

mb-auto: Item 1
Item 2
Item 3
Item 1
Item 2
mt-auto: Item 3

Flex Items Order

'order-3': Item 1
'order-1': Item 2
'order-2': Item 3

align-content-start

Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item

align-content-end

Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item

align-content-center

Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item

align-content-between

Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item

align-content-around

Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item
Demo Item