Flexbox un Grid ģenerators

Kā lietot flexbox un grid ģeneratoru

1. Izvēlieties Izkārtojums: Flexbox vai Grid, vai sāciet ar kādu no Sagataves (Centrēts, Navigācijas josla, Aplūstošas kartītes, Sānjosla, Adaptīvs kartīšu režģis, Svētais gruals (Holy grail), 12 kolonnas).
2. Iestatiet Konteiners īpašības. Flexbox: flex-direction un flex-wrap. Grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items un grid-template-areas. Abiem kopīgi ir justify-content, align-items, align-content, row-gap (px) un column-gap (px).
3. Pārvaldiet Elementi ar Pievienot elementu, Noņemt atlasīto elementu un Atiestatīt atlasīto elementu. Noklikšķiniet uz elementa priekšskatījumā (vai pārejiet uz to ar Tab un nospiediet Enter), lai to atlasītu.
4. Rediģējiet atlasīto elementu: order un align-self abos režīmos, flex-grow, flex-shrink un flex-basis flexbox režīmā un grid-area, grid-column, grid-row un justify-self grid režīmā.
5. Ar pogām Kopēt nokopējiet CSS kods un atbilstošo HTML kods.

Katra vadīkla ir standarta veidlapas lauks, tāpēc visu rotaļu laukumu var lietot tikai ar tastatūru. CSS satur tikai tās īpašības, ko mainījāt no noklusējuma, tāpēc tas ir īss, un elementi ar identiskiem iestatījumiem koplieto vienu noteikumu (.item, ja tie visi sakrīt).

Flexbox īsumā

Flexbox izkārto elementus pa vienu asi. flex-direction nosaka galveno asi (rindu vai kolonnu); justify-content izkliedē elementus pa to (center, space-between…), bet align-items novieto tos pa šķērsasi. Ar flex-wrap: wrap elementi, kas neietilpst, pāriet jaunā rindā, un align-content tad sadala atstarpes starp šīm rindām.

Katram elementam ir trīs izmēra īpašības, ko parasti raksta kopā kā flex:

• flex-basis: sākuma izmērs (auto izmanto saturu vai width);
• flex-grow: cik daudz brīvās vietas elements ņem (0 = neko, 1 = vienādu daļu);
• flex-shrink: cik daudz tas atdod, kad vietas trūkst (0 = nekad nesaraujas).

Sagatave Sānjosla rāda klasisko paraugu: sānjosla ar flex-basis: 200px un flex-shrink: 0 un galvenais apgabals ar flex-grow: 1.

CSS Grid īsumā

Grid izkārto elementus divās dimensijās. grid-template-columns: repeat(3, 1fr) izveido trīs vienādas kolonnas; fr ir brīvās vietas daļa. repeat(auto-fill, minmax(120px, 1fr)) izveido tik kolonnu, cik ietilpst, katra vismaz 120px platumā, kas dod adaptīvu kartīšu režģi bez jebkāda media query.

Elementi aizpilda šūnas secībā, ja vien tos nenovietojat: grid-column: span 2 padara elementu divu kolonnu platu, bet grid-column: 1 / -1 izstiepj to pāri visai rindai.

grid-template-areas ļauj zīmēt izkārtojumu ar nosaukumiem. Ierakstiet vienu rindu katrā līnijā, piemēram, header header, tad nav main, un norādiet elementiem grid-area: header vai grid-area: main. Punkts apzīmē tukšu šūnu. Katrā rindā jābūt vienādam šūnu skaitam, un katram nosaukumam jāveido taisnstūris; pretējā gadījumā rīks brīdina.