Align Item using CSS Flex

Top Left

align-items: flex-start

justify-content: flex-start

text-align: left

Top Center

align-items: flex-start

justify-content: center

text-align: center

Top Right

align-items: flex-start

justify-content: flex-end

text-align: right

Center Left

align-items: center

justify-content: flex-start

text-align: left

Center Center

align-items: center

justify-content: center

text-align: center

Center Right

align-items: center

justify-content: flex-end

text-align: right

Bottom Left

align-items: flex-end

justify-content: flex-start

text-align: left

Bottom Center

align-items: flex-end

justify-content: center

text-align: center

Bottom Right

align-items: flex-end

justify-content: flex-end

text-align: right