Fushë prove për Flexbox dhe Grid

Si ta përdorësh fushën e provës për flexbox dhe grid

1. Zgjidh një Faqosje: Flexbox ose Grid, ose nis nga një prej Gatishmërive (I përqendruar, Shirit navigimi, Karta që kalojnë në rresht të ri, Shirit anësor, Rrjetë kartash responsive, Holy grail, 12 kolona).
2. Cakto vetitë e Kontejnerit. Për flexbox: flex-direction dhe flex-wrap. Për grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items dhe grid-template-areas. Të dyja ndajnë justify-content, align-items, align-content, row-gap (px) dhe column-gap (px).
3. Menaxho Elementët me Shto element, Hiq elementin e zgjedhur dhe Rivendos elementin e zgjedhur. Kliko një element në pamjen paraprake (ose shko te ai me Tab dhe shtyp Enter) për ta zgjedhur.
4. Ndrysho elementin e zgjedhur: order dhe align-self në të dy mënyrat, flex-grow, flex-shrink dhe flex-basis për flexbox, dhe grid-area, grid-column, grid-row dhe justify-self për grid.
5. Kopjo Kodin CSS dhe Kodin HTML përkatës me butonat e tyre Kopjo.

Çdo kontroll është një fushë standarde formulari, kështu që e gjithë fusha e provës funksionon vetëm me tastierë. CSS përmban vetëm vetitë që i ke ndryshuar nga parazgjedhjet, gjë që e mban të shkurtër, dhe elementët me cilësime identike ndajnë një rregull të vetëm (.item kur përputhen të gjithë).

Flexbox shkurt

Flexbox i vendos elementët përgjatë një aksi. flex-direction cakton aksin kryesor (një rresht ose një kolonë); justify-content i shpërndan elementët përgjatë tij (center, space-between…), dhe align-items i pozicionon në aksin tërthor. Me flex-wrap: wrap, elementët që nuk futen kalojnë në një linjë të re, dhe align-content pastaj ndan ato linja.

Çdo element ka tri veti përmasash, që zakonisht shkruhen së bashku si flex:

• flex-basis: madhësia fillestare (auto përdor përmbajtjen ose width);
• flex-grow: sa nga hapësira e lirë merr elementi (0 = asnjë, 1 = një pjesë e barabartë);
• flex-shrink: sa lëshon kur hapësira është e pamjaftueshme (0 = nuk tkurret kurrë).

Gatishmëria Shirit anësor tregon modelin klasik: një shirit anësor me flex-basis: 200px dhe flex-shrink: 0, dhe një zonë kryesore me flex-grow: 1.

CSS Grid shkurt

Grid i vendos elementët në dy dimensione. grid-template-columns: repeat(3, 1fr) krijon tri kolona të barabarta; fr është një pjesë e hapësirës së lirë. repeat(auto-fill, minmax(120px, 1fr)) krijon aq kolona prej të paktën 120px sa futen, gjë që bën një rrjetë kartash responsive pa asnjë media query.

Elementët i mbushin qelizat me radhë, përveç kur i vendos vetë: grid-column: span 2 e bën një element dy kolona të gjerë, dhe grid-column: 1 / -1 e shtrin përgjatë gjithë rreshtit.

grid-template-areas të lejon ta vizatosh faqosjen me emra. Shkruaj një rresht për çdo linjë, për shembull header header pastaj nav main, dhe jepu elementëve grid-area: header ose grid-area: main. Një pikë shënon një qelizë bosh. Çdo rresht ka nevojë për të njëjtin numër qelizash dhe çdo emër duhet të formojë një drejtkëndësh; mjeti të paralajmëron përndryshe.