FLEXBOX

Flexbox (Flexible Box) je CSS model za raspoređivanje elemenata u jednom smjeru—vodoravno ili okomito. Omogućuje lakše poravnanje, raspodjelu prostora i prilagodljivost elemenata unutar kontejnera.

Omogućuje:

• Raspoređivanja elemenata
• Poravnanja elemenata
• Raspodjela prostora između elemenata

Ideja:

• Omogućiti kontejneru izmjenu širine i visine kao i redoslijed svojih elemenata
• Omogućiti popunjavanje raspoloživog prostora
• Prilagoditi se različitim veličinama ekrana tj. Uređaja

Osnovni Pojmovi

Flex Container – Roditeljski element koji koristi display: flex;

Flex Items – Djeca unutar flex kontejnera

Osnovna Svojstva Flex Containera:

• display: flex; – Aktivira flexbox na elementu
• flex-direction – Definira smjer glavne osi
• row (zadano) – Slijeva nadesno
• row-reverse – S desna nalijevo
• column – Odozgo prema dolje
• column-reverse – Odozdo prema gore
• flex-wrap – Omogućuje prelamanje elemenata u novi red
• nowrap (zadano) – Sve ostaje u jednom redu
• wrap – Prelamanje kada nema dovoljno prostora
• wrap-reverse – Obrnuto prelamanje
• justify-content – Poravnava elemente duž glavne osi
• flex-start (zadano) – Početak osi
• center – Centrirano
• flex-end – Kraj osi
• space-between – Prvi i zadnji element na rubovima, ostali ravnomjerno raspoređeni
• space-around – Jednaki razmaci oko svih elemenata
• space-evenly – Jednaki razmaci između svih elemenata
• align-items – Poravnava elemente duž poprečne osi
• stretch (zadano) – Ispunjava cijelu visinu/širinu
• baseline – Poravnato prema osnovnoj liniji teksta
• align-content – Kontrolira poravnavanje kada postoji više redova

Osnovna Svojstva Flex Items:

• order – Mijenja redoslijed prikaza elemenata (zadano 0, niže vrijednosti idu prve)
• flex-grow – Omogućuje elementima da rastu (zadano 0)
• flex-shrink – Omogućuje smanjenje elemenata kada nema prostora (zadano 1)
• flex-basis – Postavlja početnu veličinu elementa prije prilagođavanja (može biti auto, px, %...)
• align-self – Pojedinačno mijenja poravnanje za određeni element (vrijednosti iste kao align-items)