Flex ALign Content

Flexbox Align Content is used to manage elements on multiple lines within the flex container. This property uses following values

• flex-start- this will pack all the lines of content at the start of flex container
• flex-end- this will pack all the lines of content at the end of flex container
• center- this will pack all the lines of content at the center of flex container
• space-between- this will distribute extra space between the lines of content in flex container
• space-around- this will distribute extra space with equal space around each line of content in flex container
• stretch- All lines of content will get full space of flex conatiner to fil up remaining space

Flex Start

this will pack all lines of flex conatiner and align content at the start of flex container.

Flex End

this will pack all lines of flex conatiner and align content at the end of flex container.

Flexbox Code Generators

Try our Flexbox generators to practice and generate Flex code in real time.