Display flex i flex-grow
display: flex; - ovo svojstvo postavlja element kao fleks kontejner, što omogućuje da se
njegovi izravni
potomci (flex itemi) rasporede u fleksibilnom okruženju.
flex-grow - ovo svojstvo definira koliko će element rasti u odnosu na druge elemente u fleks
kontejneru. Ako je vrijednost veća, element će zauzeti više prostora.
Flex-shrink i flex-basis
flex-shrink - određuje koliko će element "smanjiti" svoju veličinu kada prostor u fleks
kontejneru nije dovoljno velik. Vrijednost od 1 znači da može smanjiti svoju veličinu.
flex-basis - postavlja početnu veličinu elementa prije nego što bilo koji "grow" ili "shrink"
efekti stupe na snagu. Može biti u pikselima, postocima ili auto.
Flex-wrap i flex-direction
flex-wrap - ovim svojstvom kontrolira se hoće li fleks itemi preći u novi red ako nema
dovoljno prostora u kontejneru. Moguće vrijednosti: nowrap (default), wrap, wrap-reverse.
flex-direction - definira smjer u kojem će fleks itemi biti raspoređeni unutar kontejnera.
Vrijednosti mogu biti: row (default), column, row-reverse, column-reverse.
Justify-content i align-items
justify-content - ovim svojstvom kontrolira se raspored fleks itema duž glavne osi
(horizontalno, ako je flex-direction postavljen na row). Vrijednosti mogu biti: flex-start,
flex-end, center, space-between, space-around.
align-items - kontrolira poravnanje fleks itema duž poprečne osi (vertikalno, ako je
flex-direction postavljen na row). Vrijednosti mogu biti: stretch (default), flex-start, flex-end,
center, baseline.