Server

Flexbox ponavljanje!

  • Gumb1
  • Gumb2
  • Gumb3
  • Gumb4
  • Gumb5

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.