# Flex Box
Hi, Flex Box is one of the ways to create beautiful layouts for a web page/ web app.
You can convert an element into flex-box container by setting display property to flex.
Once an element is defined as flex-box, the items inside the flex-box container becomes flex-items.
By default these items are arranged horizontally.
The direction of arrangement can be changed to vertical by setting flex-direction property to column.
Once the flex-direction property is set, the axis along which the flex-direction is set is called ππππ π΄π₯ππ and the one perpendicular to it is called πΆπππ π π΄π₯ππ .
Justify-content property of flex-box container is used to adjust the positioning of flex-items along the ππππ π΄π₯ππ .
The values for justify-content property include
1. flex-start (default)
2. center
3. flex-end
4. space-between
5. space-around
Check out the cheat sheets below
align-items property of flex-box container is used to adjust the positioning of flex-items along the πΆπππ π π΄π₯ππ .
The values for align-items property include
1. stretch (default)
2. flex-start
3. center
4. flex-end
Check out the cheat sheets for all possible combinations
flex-wrap property of flex-box container is used to wrap the flex-items to next line along πΆπππ π π΄π₯ππ .
The values for flex-wrap property include
1. nowrap (default)
2. wrap
3. wrap-reverse
Check out the cheat sheets
align-content property of flex-box container is used to align the flex-lines along πΆπππ π π΄π₯ππ .
align-content is used when multiple lines of flex-items needs to be aligned.
The values for flex-wrap property include
1. stretch (default)
2. flex-start
3. center
4. flex-end
5. space-between
6. space-around
7. space-evenly
Check out the cheat sheets
That's all for this blog.
Thank you.