CSS 26 💻 flex-grow, flex-shrink properties

a - flex-grow property

    flex-grow specifies the grow factor 
    In other words specifies how much can grow relative to its siblings
    The greater the value the more it will grow in proportion to its siblings
    values → number values
    item1 and item3 will take 25% each of the total width
    item2 will take 50% of the total width
    there are in total 4 grow factors (1+2+1)


b - flex-shrink property

    flex-shrink specifies the shrink factor
    if the total size of children are larger than their parent container, they can shrink
    The greater the value the more it will shrink in proportion to its siblings
    values → number values
    item4 and item5 will have 40% each
    item6 will have 20%
    there are in total 4 shrink factors(1+1+2)