Identificați axa înainte de a alege o proprietate CSS
Citiți tampoanele de crin țintă ale nivelului și inspectați aranjamentul actual al broaștelor. În direcția de rând implicită, justify-content funcționează de-a lungul axei principale orizontale și align-items de-a lungul axei transversale verticale. Înainte de a tasta o valoare, indicați ce axă doriți să modificați. Acest obicei previne o greșeală comună: alegerea valorii corecte pentru o proprietate care controlează o direcție diferită.
Când flex-direction se schimbă în coloană, axele principale și transversale se schimbă odată cu aceasta. Reevaluați proprietatea în loc să presupuneți că justify-content înseamnă întotdeauna mișcare orizontală. Introduceți o modificare CSS în editor și comparați pozițiile rezultate cu ținte. Broaștele sunt poziționate de CSS, nu sunt trase în loc. Utilizați indicii și proprietățile permise ale nivelului pentru a menține experimentul legat de sarcina afișată efectiv.
Explicați o modificare nereușită înainte de a încerca alta
După ce o schimbare ratează ținta, întrebați dacă proprietatea a afectat axa greșită, valoarea aleasă a aranjat elementele diferit de așteptările dvs. sau direcția curentă a schimbat sensul aspectului. Păstrați partea din regulă pe care o înțelegeți și revizuiți un lucru. Înlocuirea mai multor proprietăți simultan poate ajunge la țintă, lăsându-vă în același timp nesigur care modificare a rezolvat problema.
Pentru un exercițiu de revizuire, descrieți regula de succes în cuvinte înainte de a trece mai departe: ce axă a folosit și cum a poziționat broaștele în raport cu crinul. Nivelurile ulterioare pot combina idei, așa că această explicație este mai utilă decât memorarea unei linii fără contextul acesteia. Acest ghid nu oferă o listă completă de răspunsuri inventată și nu susține că rezolvarea jocului certifică aptitudinile profesionale CSS. Pagina de redare legată oferă editorului controale și încadrarea exactă a sarcinilor; centrul sprijină înțelegerea și practica la nivelurile pe care le întâlniți de fapt.
De exemplu, dacă o regulă schimbă broaștele pe verticală atunci când intenționați să vă mișcați pe orizontală, inspectați flex-direction și identificați axa principală curentă înainte de a selecta o altă valoare. Spuneți relația cu voce tare: această proprietate modifică distribuția de-a lungul axei principale, iar axa principală rulează în prezent în această direcție. Apoi faceți o editare și inspectați rezultatul. Odată ce funcționează, testează-ți explicația față de pernițele de crin vizibile. Acest lucru transformă o ghicire eșuată într-o idee de aspect reutilizabilă în loc de o comandă pe care o rețineți doar pentru un singur ecran.
Sfaturi și strategie pentru Flexbox Froggy
Bifează un sfat de exersat în următoarea rundă. Această listă nu modifică jocul și nu salvează progresul.
Întrebări și răspunsuri Flexbox Froggy
Trebuie să instalez un instrument de codare?
Nu. Editorul CSS se află în jocul de browser.
Este acesta un curs complet de dezvoltare web?
Este un joc interactiv de exersare a conceptelor de layout flexbox. Nu înlocuiește un curs mai amplu de HTML și CSS.
Cine a creat proiectul?
Thomas Park a creat Flexbox Froggy. Sursa este licențiată MIT, iar opera de artă înregistrată folosește CC BY 3.0; linkurile de atribuire sunt mai jos.
De ce flex-end schimbă partea după inversarea direcției?
Începutul și sfârșitul urmează axa principală, nu margini stânga și dreapta fixe. Cu row-reverse axa începe la dreapta, deci justify-content: flex-end aliniază la stânga. Verifică întâi flex-direction. align-items modifică axa transversală și rezolvă altă problemă de poziționare.
Comenzi și instrucțiuni complete
Comenzi și instrucțiuni complete
Joacă Flexbox Froggy