Igrišče za Flexbox in Grid

Kako uporabljati igrišče za Flexbox in Grid

1. Izberi Postavitev: Flexbox ali Grid, ali začni z eno od Predloge (Centrirano, Navigacijska vrstica, Kartice z zlomom vrstic, Stranska vrstica, Odzivna mreža kartic, Sveti gral, 12 stolpcev).
2. Nastavi lastnosti Vsebnik. Za flexbox: flex-direction in flex-wrap. Za grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items in grid-template-areas. Skupni so justify-content, align-items, align-content, row-gap (px) in column-gap (px).
3. Upravljaj Elementi z gumbi Dodaj element, Odstrani izbrani element in Ponastavi izbrani element. Klikni element v predogledu (ali se nanj premakni s tabulatorko in pritisni Enter), da ga izbereš.
4. Uredi izbrani element: order in align-self v obeh načinih, flex-grow, flex-shrink in flex-basis za flexbox ter grid-area, grid-column, grid-row in justify-self za grid.
5. Kopiraj Koda CSS in ustrezno Koda HTML z njunima gumboma Kopiraj.

Vsak kontrolnik je standardno polje obrazca, zato celotno igrišče deluje samo s tipkovnico. CSS vsebuje samo lastnosti, ki si jih spremenil glede na privzete, zato je kratek, elementi z enakimi nastavitvami pa si delijo eno pravilo (.item, kadar se vsi ujemajo).

Orodje deluje v tvojem brskalniku. Nič, kar vneseš, se ne pošlje na strežnik.

Flexbox na kratko

Flexbox razporeja elemente vzdolž ene osi. flex-direction določa glavno os (vrstico ali stolpec); justify-content elemente razporedi vzdolž nje (center, space-between …), align-items pa jih postavi na prečno os. Z flex-wrap: wrap se elementi, ki se ne prilegajo, premaknejo v novo vrstico, align-content pa nato razmakne te vrstice.

Vsak element ima tri lastnosti velikosti, ki se običajno zapišejo skupaj kot flex:

• flex-basis: začetna velikost (auto uporabi vsebino ali width);
• flex-grow: kolikšen del prostega prostora zavzame element (0 = nič, 1 = enak delež);
• flex-shrink: koliko odda, ko je prostora premalo (0 = se nikoli ne krči).

Predloga Stranska vrstica prikazuje klasičen vzorec: stranska vrstica z flex-basis: 200px in flex-shrink: 0 ter glavno območje z flex-grow: 1.

CSS Grid na kratko

Grid razporeja elemente v dveh dimenzijah. grid-template-columns: repeat(3, 1fr) ustvari tri enake stolpce; fr je delež prostega prostora. repeat(auto-fill, minmax(120px, 1fr)) ustvari toliko stolpcev z vsaj 120px, kolikor jih gre, kar da odzivno mrežo kartic brez medijskih poizvedb.

Elementi zapolnjujejo celice po vrsti, razen če jih postaviš: grid-column: span 2 naredi element širok dva stolpca, grid-column: 1 / -1 ga razteguje čez celotno vrstico.

grid-template-areas ti omogoča, da postavitev narišeš z imeni. Vpiši eno vrstico na vrstico, na primer header header in nato nav main, elementom pa dodeli grid-area: header ali grid-area: main. Pika označuje prazno celico. Vsaka vrstica potrebuje enako število celic in vsako ime mora tvoriti pravokotnik; sicer te orodje opozori.