Před výběrem vlastnosti CSS určete osu
Přečtěte si cílové pole lilie úrovně a prohlédněte si aktuální uspořádání žab. Ve výchozím směru řádků justify-content pracuje podél hlavní horizontální osy a align-items podél vertikální příčné osy. Před zadáním hodnoty uveďte, kterou osu chcete změnit. Tento zvyk zabraňuje běžné chybě: výběr správně vypadající hodnoty pro vlastnost, která řídí jiný směr.
Když se flex-direction změní na sloupec, hlavní a příčná osa se změní s ním. Přehodnoťte vlastnost místo toho, abyste předpokládali, že justify-content vždy znamená horizontální pohyb. Zadejte jednu CSS změnu v editoru a porovnejte výsledné pozice s cíli. Žáby jsou umístěny vaším CSS, nejsou přetaženy na místo. Použijte rady a povolené vlastnosti úrovně, aby byl experiment svázán se skutečně ukázaným úkolem.
Vysvětlete neúspěšnou změnu před pokusem o další
Poté, co změna mine cíl, zeptejte se, zda vlastnost ovlivnila špatnou osu, zvolená hodnota uspořádala položky jinak, než jste očekávali, nebo aktuální směr změnil význam rozvržení. Zachovejte část pravidla, které rozumíte, a upravte jednu věc. Nahrazení několika vlastností najednou může dosáhnout cíle, aniž byste si byli jisti, která změna problém vyřešila.
Pro opakovací cvičení popište úspěšné pravidlo slovy, než budete pokračovat: kterou osu použilo a jak umístilo žáby vzhledem k polštářkům lilie. Pozdější úrovně mohou kombinovat nápady, takže toto vysvětlení je užitečnější než memorování řádku bez jeho kontextu. Tato příručka neposkytuje vymyšlený úplný seznam odpovědí ani netvrdí, že řešení hry osvědčuje profesionální CSS dovednost. Propojená stránka přehrávání poskytuje editoru ovládací prvky a přesné uspořádání úkolů; centrum podporuje porozumění a praxi napříč úrovněmi, se kterými se skutečně setkáváte.
Pokud například pravidlo změní žáby vertikálně, když jste zamýšleli horizontální pohyb, zkontrolujte flex-direction a určete aktuální hlavní osu, než vyberete jinou hodnotu. Vyslovte vztah nahlas: tato vlastnost mění rozložení podél hlavní osy a hlavní osa aktuálně běží tímto směrem. Poté proveďte jednu úpravu a zkontrolujte výsledek. Jakmile to funguje, otestujte své vysvětlení proti viditelným polštářkům lilie. Tím se nezdařený odhad změní na znovu použitelný nápad rozvržení namísto příkazu, který si pamatujete pouze pro jednu obrazovku.
Tipy a strategie pro Flexbox Froggy
Označte tip pro příští hru. Tento seznam nemění hru ani neukládá herní postup.
Otázky a odpovědi k Flexbox Froggy
Musím si nainstalovat nějaký kódovací nástroj?
Ne. Editor CSS je uvnitř prohlížečové hry.
Je to kompletní kurz webového vývoje?
Jedná se o interaktivní cvičnou hru pro koncepty flexboxového rozvržení. Nenahrazuje širší kurz HTML a CSS.
Kdo projekt vytvořil?
Thomas Park vytvořil(a) Flexbox Froggy. Zdroj má licenci MIT a nahraná grafika používá CC BY 3.0; odkazy na zdroje jsou uvedeny níže.
Proč po obrácení směru přesouvá flex-end žábu na opačnou stranu?
Začátek a konec se řídí hlavní osou, ne pevnou levou a pravou hranou. Při row-reverse začíná osa vpravo, takže justify-content: flex-end umístí prvky vlevo. Nejprve ověřte flex-direction. align-items mění příčnou osu a řeší jiný problém umístění.