Flexbox ir Grid žaidimų aikštelė

Kaip naudotis flexbox ir grid aikštele

1. Pasirink Maketas: Flexbox arba Grid, arba pradėk nuo vieno iš Šablonai (Centruotas, Naršymo juosta, Laužomos kortelės, Šoninė juosta, Adaptyvus kortelių tinklelis, Šventasis gralis, 12 stulpelių).
2. Nustatyk Konteineris savybes. Flexbox: flex-direction ir flex-wrap. Grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items ir grid-template-areas. Abiem bendri justify-content, align-items, align-content, row-gap (px) ir column-gap (px).
3. Tvarkyk Elementai mygtukais Pridėti elementą, Pašalinti pasirinktą elementą ir Atstatyti pasirinktą elementą. Spustelėk elementą peržiūroje (arba pereik prie jo Tab klavišu ir spausk Enter), kad jį pasirinktum.
4. Redaguok pasirinktą elementą: order ir align-self abiejuose režimuose, flex-grow, flex-shrink ir flex-basis flexbox, o grid-area, grid-column, grid-row ir justify-self grid atveju.
5. Nukopijuok CSS kodas ir atitinkamą HTML kodas jų mygtukais Kopijuoti.

Kiekvienas valdiklis yra standartinis formos laukas, todėl visa aikštelė veikia vien su klaviatūra. CSS sudaro tik savybės, kurias pakeitei nuo numatytųjų, todėl jis trumpas, o elementai su vienodais nustatymais dalijasi viena taisykle (.item, kai visi sutampa).

Veikia tavo naršyklėje. Nieko, ką įvedi, nesiunčiame į serverį.

Flexbox trumpai

Flexbox išdėsto elementus išilgai vienos ašies. flex-direction nustato pagrindinę ašį (eilutę ar stulpelį); justify-content paskirsto elementus išilgai jos (center, space-between…), o align-items išdėsto juos skersinėje ašyje. Su flex-wrap: wrap netelpantys elementai pereina į naują eilutę, o align-content tada paskirsto tarpus tarp tų eilučių.

Kiekvienas elementas turi tris dydžio savybes, paprastai rašomas kartu kaip flex:

• flex-basis: pradinis dydis (auto naudoja turinį arba width);
• flex-grow: kokią laisvos vietos dalį elementas užima (0 = jokios, 1 = vienoda dalis);
• flex-shrink: kiek jis atsisako, kai vietos trūksta (0 = niekada nesitraukia).

Šablonas Šoninė juosta rodo klasikinį šabloną: šoninė juosta su flex-basis: 200px ir flex-shrink: 0 bei pagrindinė sritis su flex-grow: 1.

CSS Grid trumpai

Grid išdėsto elementus dviem matmenimis. grid-template-columns: repeat(3, 1fr) sukuria tris vienodus stulpelius; fr yra laisvos vietos dalis. repeat(auto-fill, minmax(120px, 1fr)) sukuria tiek stulpelių, bent po 120px, kiek telpa, ir taip gaunamas adaptyvus kortelių tinklelis be jokios media užklausos.

Elementai užpildo langelius iš eilės, nebent juos išdėstysi: grid-column: span 2 elementą padaro dviejų stulpelių pločio, o grid-column: 1 / -1 ištempia per visą eilutę.

grid-template-areas leidžia nubraižyti maketą pavadinimais. Įrašyk po vieną eilutę teksto eilutėje, pavyzdžiui, header header, tada nav main, ir elementams nurodyk grid-area: header ar grid-area: main. Taškas žymi tuščią langelį. Kiekvienoje eilutėje turi būti tiek pat langelių, o kiekvienas pavadinimas turi sudaryti stačiakampį; kitu atveju įrankis perspėja.