Understand flex property

1. The flex property is a shorthand for flex-grow,flex-shrink,flex-basis.
2. The flex-basis property determines the flexibility base used as the primary initial size for a flexible element, we can indicate width:(px,em,%,auto) but also content:(content,max-content,min-content..) who affect the size in terms of his content.
3. The flex-grow property determines the amount of space the element should consume in a flexible container. flex-grow:1 indicate that the element will take 1 fraction of available space.
4. The flex-shrink property defines the possibility for a flex item to be reduced if necessary when there is not enough space in a row, by default the value is flex-shrink:1 which mean that all items will be reduced by the same size if we change this value and give it to one element flex-shrink:2 this element will be reduced twice more than the others.