CSS Layout (postavitev) je temelj vsake spletne strani. V preteklosti smo za postavitev
uporabljali tabele ali float, danes pa imamo na voljo dve močni in sodobni tehnologiji:
Flexbox in Grid.
Flexbox (Flexible Box Layout) je idealen za eno-dimenzionalne postavitve – bodisi v vrstici (vodoravno) ali v stolpcu (navpično). Omogoča enostavno poravnavo elementov, razporeditev prostora med njimi in prilagajanje velikosti. Perfekten za navigacijske vrstice, kartice, gumbne vrstice in manjše komponente.
Grid (CSS Grid Layout) pa je močnejši orodje za dve-dimenzionalne postavitve – hkrati upravlja vrstice in stolpce. Omogoča ustvarjanje kompleksnih, celovitih struktur strani (header, sidebar, main, footer) z natančnim nadzorom nad vsakim delom mreže. Grid je odličen za celotno strukturo spletne strani.
V tej vadnici bomo pokrili obe tehnologiji, njihove lastnosti in kako jih uporabiti v praksi. Na koncu boste sposobni ustvariti poljubno postavitev, ki je odzivna in prilagodljiva vsem napravam.
| Lastnost | Primer | Opis | |
|---|---|---|---|
| Flexbox: Vsebnik (Container) | |||
display: flex; | display: flex; |
Aktivira Flexbox za vsebnik | |
flex-direction | flex-direction: row; |
Smer razporeditve (row, row-reverse, column, column-reverse) | |
justify-content | justify-content: center; |
Poravnava vzdolž glavne osi (levo, desno, sredina, razporeditev) | |
align-items | align-items: center; |
Poravnava vzdolž prečne osi (zgoraj, spodaj, sredina, raztegnjeno) | |
flex-wrap | flex-wrap: wrap; |
Ali naj se elementi prelomijo v novo vrstico (nowrap, wrap, wrap-reverse) | |
gap | gap: 20px; |
Razmik med elementi | |
| Flexbox: Posamezni Elementi | |||
flex | flex: 1; |
Kratka sintaksa za grow, shrink, basis | |
flex-grow | flex-grow: 1; |
Koliko naj se element raztegne glede na preostanek prostora | |
flex-shrink | flex-shrink: 1; |
Koliko naj se element skrči, če je prostora premalo | |
align-self | align-self: flex-end; |
Prekrije align-items za posamezen element | |
| Grid: Vsebnik (Container) | |||
display: grid; | display: grid; |
Aktivira Grid za vsebnik | |
grid-template-columns | grid-template-columns: 1fr 1fr 1fr; |
Določi število in velikost stolpcev (1fr = en del) | |
grid-template-rows | grid-template-rows: 100px auto; |
Določi število in velikost vrstic | |
grid-template-areas | grid-template-areas: "header header" "sidebar main"; |
Imenovanje območij za lažjo postavitev | |
gap | gap: 20px; |
Razmik med vrsticami in stolpci | |
justify-items | justify-items: center; |
Poravnava vsebine znotraj celic (vse celice) | |
align-items | align-items: stretch; |
Poravnava vsebine znotraj celic (vse celice) | |
justify-content | justify-content: space-around; |
Poravnava celotne mreže znotraj vsebnika | |
| Grid: Posamezni Elementi | |||
grid-column | grid-column: 1 / 3; |
Postavi element od stolpca 1 do 3 | |
grid-row | grid-row: 1 / span 2; |
Postavi element od vrstice 1, raztegni čez 2 vrstici | |
grid-area | grid-area: header; |
Postavi element v imenovano območje | |
justify-self | justify-self: end; |
Prekrije justify-items za posamezen element | |
