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.