Početna
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)