Kako deluje Flexbox?
Flexbox je zasnovan za dinamično prilagoditev vsebine glede na širino kontejnerja. Tukaj je nekaj ključnih lastnosti:
1. Porazdelitev elementov v vrsto ali stolpce:
- Če kontejner uporablja display: flex;, bo vedno vključil toliko elementov, kolikor jih prostor dopušča.
- Če širina elementov ne omogoča vseh v eni vrstici, lahko uporabiš flex-wrap: wrap;, da se presežni elementi prelijejo v novo vrstico.
2. Kako določiš širino posameznih elementov:
- Flex elementi bodo samodejno poprijeli za prostor, ki je na voljo (če niso omejeni s širino).
- Če želiš natančno število elementov v vrstici, moraš ročno nadzorovati širino posameznega elementa in razmike (npr. z uporabo flex-basis, gap ali margin).
Ključna lastnost Flexbox-a:
Flexbox
sam ne nadzoruje števila elementov v vrstici. Samo razporedi toliko
elementov, kolikor jih lahko v eni vrstici glede na razpoložljivo
širino.
Kako deluje CSS Grid?
CSS Grid je namenjen bolj statičnim (nadzorovanim) postavitvam elementov. Ključne lastnosti:
1. Struktura v vrsticah in stolpcih:
- Grid omogoča natančno določanje števila vrstic in stolpcev.
- Primer: grid-template-columns: repeat(5, 1fr); zagotovi točno 5 stolpcev, ne glede na velikost zaslona.
2. Avtomatska prilagoditev širine elementa:
- Grid bo prilagodil velikost elementa (če je prilagodljiv) tako, da ustreza definiranemu številu stolpcev.
- Presežni elementi bodo samodejno prešli v naslednjo vrstico.
Ključna lastnost Grid-a:
CSS Grid omogoča, da natančno določiš število elementov v vrstici (npr. 5 izdelkov ne glede na zaslon, dokler tega ne spremeniš z media query).
Kje so razlike med Flex in Grid?
| Lastnost | Flexbox | CSS Grid |
|---|---|---|
| Uporaba | Dinamično razmiganje vsebine (ena dimenzija). | Statično razmiganje vsebine (več dimenzij). |
| Primerna uporaba | Inline postavitve, kjer se izdelki dinamično prilagajajo. | Tabela ali mreža z nadzorovanim številom vrstic/stolpcev. |
| Poravnava števila elementov | Vedno izračuna, koliko elementov spravi v eno vrstico. | Številu elementov natančno določaš število vrstic/stolpcev. |
| Kontrola širine elementov | Dinamično (flex-basis, gap, margin, flex-wrap). | Točno določeno s grid-template-columns/rows ali explicit columns. |
| Posledica presežka | Doda v novo vrstico (če je wrap omogočen). | Preostali elementi preidejo v novo vrstico/grid vrstico. |