A CSS tulajdonság kiválasztása előtt azonosítsa a tengelyt
Olvassa el a szint célliliompárnáit, és ellenőrizze a békák aktuális elrendezését. Az alapértelmezett sorirányban a justify-content a vízszintes főtengely, a align-items pedig a függőleges kereszttengely mentén működik. Az érték beírása előtt adja meg, hogy melyik tengelyt szeretné megváltoztatni. Ez a szokás megakadályozza a gyakori hibát: a megfelelő érték kiválasztását egy olyan ingatlanhoz, amely más irányt vezérel.
Amikor a flex-direction oszlopra változik, a fő- és kereszttengely is megváltozik vele. Értékelje újra a tulajdonságot ahelyett, hogy azt feltételezné, hogy a justify-content mindig vízszintes mozgást jelent. Adjon meg egy CSS változást a szerkesztőben, és hasonlítsa össze az eredményül kapott pozíciókat a célokkal. A békákat a CSS helyezi el, nem húzza a helyükre. Használja a szint tippjeit és az engedélyezett tulajdonságokat, hogy a kísérlet a ténylegesen megjelenített feladathoz kapcsolódjon.
Magyarázzon el egy sikertelen változtatást, mielőtt másikat próbálna
Ha egy változtatás célt tévesztett, kérdezze meg, hogy a tulajdonság rossz tengelyt érintett-e, a választott érték a várttól eltérően rendezte-e el az elemeket, vagy az aktuális irány megváltoztatta az elrendezés jelentését. Tartsa meg a szabály azon részét, amelyet megért, és javítson át egy dolgot. Több tulajdonság egyidejű cseréje elérheti a célt, miközben nem biztos abban, hogy melyik változtatás oldotta meg a problémát.
Egy áttekintési gyakorlathoz írja le szavakkal a sikeres szabályt, mielőtt továbblépne: melyik tengelyt használta, és hogyan helyezte el a békákat a liliompárnákhoz képest. A későbbi szintek kombinálhatják az ötleteket, így ez a magyarázat hasznosabb, mint egy sor kontextusa nélküli memorizálása. Ez az útmutató nem ad egy kitalált teljes válaszlistát vagy azt állítja, hogy a játék megoldása professzionális CSS jártasságot tanúsít. A linkelt lejátszási oldal a szerkesztő vezérlőit és pontos feladatkeretezést ad; a központ támogatja a megértést és a gyakorlást azokon a szinteken, amelyekkel ténylegesen találkozik.
Például, ha egy szabály függőlegesen megváltoztatja a békákat, amikor vízszintes mozgást kívánt, ellenőrizze a flex-direction-ot, és azonosítsa az aktuális főtengelyt, mielőtt másik értéket választana. Mondja ki hangosan az összefüggést: ez a tulajdonság megváltoztatja az eloszlást a főtengely mentén, és a főtengely jelenleg ebben az irányban fut. Ezután végezzen egy szerkesztést, és ellenőrizze az eredményt. Ha működik, tesztelje a magyarázatot a látható liliompárnákon. Ez a sikertelen találgatást újrafelhasználható elrendezési ötletté változtatja, nem pedig olyan parancsot, amelyre csak egy képernyőre emlékszik.
Flexbox Froggy tippek és stratégia
Jelölj meg egy tippet a következő játékhoz. Ez a lista nem módosítja a játékot és nem menti a haladásodat.
Flexbox Froggy kérdések és válaszok
Telepítenem kell egy kódoló eszközt?
Nem. A CSS szerkesztő a böngészős játékon belül található.
Ez egy teljes webfejlesztő tanfolyam?
Ez egy interaktív gyakorlójáték a flexbox layout koncepcióinak elsajátítására. Nem helyettesíti a szélesebb körű HTML és CSS kurzust.
Ki hozta létre a projektet?
Thomas Park alkotta meg a Flexbox Froggy-t. A forrás MIT licenccel rendelkezik, és a rögzített műalkotás a CC BY 3.0-t használja; a forrásmegjelölések alább találhatók.
Miért vált oldalt a flex-end az irány megfordítása után?
A kezdet és vég a főtengelyt követi, nem rögzített bal és jobb szélt jelent. A row-reverse jobbról indul, így a justify-content: flex-end balra igazít. Először a flex-direction értékét nézd meg. Az align-items a kereszttengelyt állítja, ezért más elhelyezési gondot old meg.
Irányítás és teljes játékleírás
Irányítás és teljes játékleírás
Flexbox Froggy indítása