CSS 27 💻 flex-basis, flex and flex-flow properties

a - flex-basis property

    flex-basis specifies the initial main size of a flexible item
    This happens before any free space is distributed.
    values → witdth(em, px, %), auto(default), content, max-content, min-content and fit-content
    flex-basis: 100px; → initial main size
    flex-basis: 1fr; → proportionally sized with free space
    flex-basis: 20%; → proportionally sized by taking up 20% of available space 
    flex-basis: 5em; → fixed size of 5em 


b - flex property

    flex property is a shorthand property for flex-grow, flex-shrink and flex-basis
    It allows you to control how items are distributed inside theis container
    values: (grow, shrink, basis) none → 0 0 auto; auto → 1 1 auto; 10em → 1 1 10em
    two values, if both integers: 2 2 → 2 2 0%, if one integer: 1 30px → 1 1 30px;
    flex: 2 1 100px; → grow twice, shrink once and initial size of 100px
    flex: 1 2 auto; → grow once, shrink twice and takes initial size based on content
    flex: 1 1 5em; → grow once, shrink once and set initial size to 5em 


c - flex-flow property

    flex-flow is a shorthand property for flex-direction and flex-wrap
    It specifies items' direction and if wrapped
    values(direction) → row, row-reverse, column, column-reverse
    values(wrap) → nowrap, wrap, wrap-reverse
    Values from direction and wrap can be used together or alone
    flex-flow: row wrap; → row direction with wrap enabled
    flex-flow: column nowrap; → column direction with wrap disabled