Flex Items Properties
Flex items also have spaces in between them. Let’s discuss them.
Flex Basis
Before distributing any remaining space in the container, the flex-basis defines the size of the items in the main axis. Let's say it's the starting point for our item size. If you declare your container to be flex, it moves into a row direction as default and checks if you've given the container size. Suppose you didn't give it a size; the items will take as much space as they like to display their content in the container.
Flex Grow
If you set flex items to flex-grow with a positive integer, the flex items will grow from the "flex-basis" size along the main axis. So, instead of having remaining space, they occupy the whole space in that container.
For example, let's say we give all items in our container a flex-grow value of 1; the available space in the container will be distributed equally among themselves, causing the items to stretch and fill the container along the main axis. Flex-grow can also distribute space in proportion.
For instance, we have three items in our container. If the first item in our container is given a flex-grow value of 2 and the other items are given a value of 1, the space available will be divided into two parts for the first item and one part for the other two items. With this, you know how flex-grow will distribute space based on its value.
Flex Shrink
This property is the opposite of flex-grow, and it takes away space from the flex items when there is not enough space within the container. If flex items don't have enough space and we still set flex-shrink to a positive integer, our items will become smaller than their initial size. Flex-shrink can be set to different values across our flex items to make one shrink faster than the others. Just know that the higher the value, the higher it shrinks.
Flex Wrap Properties
When you set your container to flex-wrap, items are forced into a new line and even wrapped into multiple lines. It has the values of no-wrap, wrap, and wrap-reverse.
No-wrap: All items in the container are laid out in a single line. It will cause your container to overflow.
Wrap: Items will be broken into multiple lines in the container, allowing the layout to be flexible and organized.
Wrap-reverse: This is the reverse of wrap, as it makes the last item in the container become the first item.