2.0 Flexbox
Flexbox je CSS metoda za raspoređivanje elemenata unutar kontejnera. Omogućuje jednostavno centriranje, raspoređivanje i mijenjanje smjera elemenata.
Ovdje vidimo tri elementa u jednom redu – osnovni primjer Flexboxa.
2.1 Flex Grow / Shrink
Flex Grow određuje koliko element raste u odnosu na ostale unutar slobodnog prostora.
Flex Shrink određuje koliko element može smanjiti svoju veličinu kada nema dovoljno prostora.
Prvi element raste jer ima flex-grow: 1.
2.2 Flex Wrap / Basis
Flex Wrap omogućuje da se elementi prelome u novi red ako nema dovoljno mjesta.
Flex Basis određuje početnu veličinu elementa prije nego što Flexbox dijeli prostor.
Ovdje vidimo više elemenata koji prelaze u novi red na manjim ekranima.
2.3 Ravnanje elemenata
Flexbox omogućuje jednostavno ravnanje elemenata:
- justify-content: horizontalno ravnanje
- align-items: vertikalno ravnanje
Elementi su centrirani i horizontalno i vertikalno unutar kontejnera.
2.4 Order
Order omogućuje da promijenimo redoslijed elemenata u Flexbox kontejneru bez mijenjanja HTML-a.
Element s nižim order prikazuje se prije onog s višim.
Redoslijed prikaza: Drugi, Treći, Prvi.