Kezdd a Flexbox Froggy kurzussal gyakorold a tengely menti igazítást, majd a Grid Garden kurzussal gyakorold egy elem elhelyezését a rácsvonalak között. Minden játékgyakorlat után ismételd meg az ötletet egy saját kis oldalon. Hasznos eredmény, ha el tudod magyarázni, miért működik egy deklaráció, amikor az elrendezés megváltozik, ahelyett, hogy egy adott szint válaszára emlékeznél.
Hogyan tanulj CSS-t játékokkal, majd alkalmazd?
Ez az útvonal két játékot ötvöz három eredeti gyakorlattal. Olyanoknak ajánlott, akik el tudnak olvasni egy egyszerű CSS-szabályt, és látható visszajelzést szeretnének. Nem egy teljes webfejlesztési kurzus: a valódi felületekhez is olvasható tartalomra, reszponzív viselkedésre, billentyűzet-hozzáférésre és különböző mennyiségű szöveggel való tesztelésre van szükség.
Válassza ki a kérdéséhez illő feladatot
| Az Ön kérdése | Kezdje itt | Akkor próbálja ki |
|---|---|---|
| Hogyan mozgathatok elemeket egy sorban? | Flexbox Froggy | 1. feladat: csoport áthelyezése a végére |
| Miért változott meg az igazítás, amikor oszlopra váltottam? | Flexbox Froggy | 2. feladat: a főtengely megváltoztatása |
| Hogyan helyezhetek el valamit adott oszlopok között? | Grid Garden | 3. feladat: kártya elhelyezése a sorok között |
A játékokat a Codepip készítette. A Cozcade minden egyes kiosztott játékot a hozzá tartozó párosítási útmutatóhoz kapcsol: Flexbox Froggy és útmutatója; Grid Garden és útmutatója. Az eredeti Froggy és Grid Garden oldalak a szerzők saját verzióit tartalmazzák. Használjon billentyűzetet a kódgyakorlatok követéséhez.
Először is nevezze el a tengelyt, mielőtt tulajdonságot választana.
A Flexboxnak van egy főtengelye és egy kereszttengelye. A flex-direction a fő irányt állítja be; a justify-content a főtengely mentén helyezi el az elemeket, míg a align-items a kereszttengelyre vonatkozik. Egy normál balról jobbra haladó sorban a főtengely vízszintes. Ha az irányt oszlopra változtatja, függőleges lesz. Ezeket a definíciókat a MDN Flexbox bevezetőjében tárgyaljuk.
Mielőtt megpróbálná deklarálni a Froggy-ban, mondja meg, hogy melyik irányba szeretné mozgatni az elemeket. Ezután nevezze meg ezt az irányt az aktuális főtengelyhez képest. Ez egy rossz választ egy konkrét kérdéssé alakít: rossz tulajdonságot, rossz értéket vagy rossz tengelyt választott?
1. gyakorlat: csoport áthelyezése a végére
Hozzon létre három kis elemet egy tartályban. Ez egy eredeti gyakorlat, nem másolt játékszint vagy megoldókulcs.
<div class="practice-row">
<span>A</span><span>B</span><span>C</span>
</div>.practice-row {
display: flex;
gap: 0.5rem;
min-height: 8rem;
padding: 1rem;
border: 2px solid;
direction: ltr;
}A cél az, hogy a három elemet együtt, a jobb szél felé mozgassa anélkül, hogy megváltoztatná a sorrendjüket, vagy mindegyik elemnek külön margót adna. Jósolja meg az eredményt, majd adja hozzá a justify-content: flex-end elemet a tartályhoz.
Most hasonlítsa össze a justify-content: space-between elemmel. Az első választás a csoportot mozgatja; a második elosztja a rendelkezésre álló helyet az elemek között. Próbáljon ki egy keskeny és egy széles tartályt. Magyarázza el, hogy melyik verziót választaná három gombhoz, amelyeknek közel kell maradniuk egymáshoz. A látható eredmény fontosabb, mint egyetlen érték megjegyzése.
2. gyakorlat: megtartani ugyanazt az utasítást, megváltoztatni a tengelyt
Használd újra a tárolót, add hozzá a flex-direction: column-t, állítsd be a height: 12rem-t, és tartsd meg a justify-content: flex-end-t. Az elemek most alul gyűlnek össze. A deklarációd nem vált „jobbra mozgatás” parancssá: továbbra is a főtengely mentén működik, amelyet megváltoztattál.
Ezután add hozzá a align-items: flex-start-t. Hasonlítsd össze az elrendezést a hozzáadás előtt és után. A megadott balról jobbra irányultsággal az elemek balra igazodnak a kereszttengelyen. Távolítsd el a deklarációt, és figyeld meg újra az alapértelmezett nyújtási viselkedést.
Írj egy rövid magyarázatot mindkét változtatásról anélkül, hogy a „csak úgy működik” kifejezést használnád. Például azonosítsd a tengelyt, a szabad területet és az elhelyezett csoportot. Ha nem tudod megmagyarázni az eredményt, csökkentsd a példát két elemre, és egyszerre csak egy deklarációt változtass. Ezt a szokást érdemes visszavinni a játékba.
Ezután, különböztesd meg a rácssávot a határától.
A rács elhelyezése sorokat és oszlopokat körülvevő vonalakkal történik. Öt explicit oszlopnak hat határvonala van. Egy, a 3. oszlopsortól az 5. sorig elhelyezett elem két oszlopot ölel fel, nem hármat. A sávok, cellák és vonalak közötti különbségtételért lásd a MDN Rácsbevezetése című részt.
A Grid Garden-ben olvasd el a kezdő és a véghatárokat, mielőtt megpróbálsz elhelyezni egy pozíciót. A saját oldaladon rajzold meg vagy címkézd fel a határokat, ha a terek számolása zavaró.
3. gyakorlat: helyezz el egy kártyát két sor között
Készíts egy öt oszlopos táblát, és adj neki egy kártyát:
<div class="practice-grid">
<div class="practice-card">Two-column card</div>
</div>.practice-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: repeat(3, 4rem);
gap: 0.5rem;
direction: ltr;
}
.practice-card {
grid-column: 3 / 5;
grid-row: 2;
background: #d9ceff;
color: #201538;
}Jósold meg, hogy hol fog megjelenni a kártya az oldal megnyitása előtt. Ezután tedd úgy, hogy az egész táblát kitöltse, csak az oszlopok elhelyezését változtatva. A fenti öt explicit oszloppal a grid-column: 1 / 6 az első határtól az utolsóig ér.
Végül változtasd meg a szöveget egy sokkal hosszabb mondatra, és szűkítsd le a böngészőt. Az elhelyezési szabály helyes maradhat, miközben a kártya fix magasságú megjelenítése alkalmatlanná válik a tartalmához. Egy játékgyakorlat megoldása az elrendezés egy részét tanítja; egy használható oldal felépítéséhez a tartalom ellenőrzése is szükséges.
Használd a játék előrehaladását visszajelzésként, ne a tudás bizonyítékaként
Egy sikeres gyakorlat után változtass meg egy feltételezést: az irányt, az elemek számát, az elérhető szélességet vagy a szöveg hosszát. Jósold meg az eredményt, mielőtt megnéznéd. Ha át tudod alakítani az ötletet és el tudod magyarázni a változást, akkor többet tanultál, mint egy szintfeladatot.
Amikor visszatérsz egy játékhoz, ellenőrizd, hogy ugyanazt a verziót és böngészőkörnyezetet nyitod-e meg. A Cozcade fiók kedvencei azokat a játékokat azonosítják, amelyeket újra szeretnél nézni; nem ígérik, hogy a játék belső leckéjének előrehaladása átkerül az eszközök között. Kerüld a tárolt webhelyadatok törlését az előrehaladás vizsgálata közben, és csak akkor használj explicit exportálási funkciót, ha az adott játék rendelkezik ilyennel.
Folytasd a párosítási útmutatóval
Használd a Froggy útmutatót a tengelyek és az igazítás gyakorlásához, és a Grid Garden útmutatót az elhelyezési kérdésekhez. Ha utána más típusú gyakorlásra vágysz, böngészd át a tanulós játékokat.
A fenti gyakorlatokat ehhez a cikkhez írtuk. A referencia oldalakat 2026. október 11-én ellenőriztük. A rögzített játékmenet-ellenőrzéseink kis számú asztali interakciót fednek le, nem az összes szint vagy egy teljes mobil kurzus elvégzését. Ez a cikk egy gyakorlási sorozatot tanít; nem ad képesítést, és nem helyettesíti a saját felületek tesztelését.
Játékok, amiket a Cozcade-n játszhatsz
Eszköz- és haladási kérdések
Egy Cozcade fiók minden játék előrehaladását menti?
A fiók kedvencei segítenek a játékok listájának vezetésében. Egy játék belső táblája, pontszáma vagy lecke előrehaladása különálló, és a játék tárolási funkcióitól függ. Ne feltételezd, hogy a bejelentkezéssel mentés történik a böngészők vagy eszközök között. Ellenőrizd a pontos játékra és verzióra vonatkozó utasításokat.
A böngészőadatok törlése eltávolíthatja a játék előrehaladását?
A webhely vagy játék tárolt adatainak eltávolítása törölheti a helyben mentett előrehaladást. A böngésző beállításai megkülönböztetik a gyorsítótárazott fájlokat a sütiktől és más webhelytárolóktól, bár egy tisztítási opció egyszerre több típust is eltávolíthat. Ellenőrizd, hogy mit törölsz, és használd a játék dokumentált exportálási funkcióját, ha van ilyen, mielőtt eltávolítod az adatokat.
Melyik játékok működnek az eszközömön?
Használd a játékkatalógusban található eszközbeállításokat, majd olvasd el a kiválasztott játék oldalán található vezérlőket. Egyes tevékenységekhez billentyűzet vagy precíz mutatóeszköz-bevitel szükséges. Az oldal betöltése a telefonon önmagában nem erősíti meg, hogy a játék kényelmesen játszható érintéssel.