Identifiser aksen før du velger en CSS egenskap
Les nivåets målliljeblokker og inspiser det gjeldende arrangementet av frosker. I standard radretning fungerer justify-content langs den horisontale hovedaksen og align-items langs den vertikale tverraksen. Før du skriver inn en verdi, angi hvilken akse du vil endre. Denne vanen forhindrer en vanlig feil: å velge den riktige verdien for en eiendom som styrer en annen retning.
Når flex-direction endres til kolonne, endres hoved- og tverraksen med den. Reevaluer egenskapen i stedet for å anta at justify-content alltid betyr horisontal bevegelse. Skriv inn én CSS endring i editoren og sammenlign de resulterende plasseringene med målene. Froskene er plassert av din CSS, ikke dratt på plass. Bruk nivåets hint og tillatte egenskaper for å holde eksperimentet knyttet til oppgaven som faktisk vises.
Forklar en mislykket endring før du prøver en annen
Etter at en endring har gått glipp av målet, spør du om egenskapen påvirket feil akse, den valgte verdien ordnet elementer annerledes enn du hadde forventet, eller den nåværende retningen endret betydningen av layouten. Hold den delen av regelen du forstår og revider én ting. Hvis du erstatter flere egenskaper samtidig, kan du nå målet samtidig som du blir usikker på hvilken endring som løste problemet.
For en gjennomgangsøvelse, beskriv den vellykkede regelen med ord før du går videre: hvilken akse den brukte og hvordan den plasserte froskene i forhold til liljebeinene. Senere nivåer kan kombinere ideer, så denne forklaringen er mer nyttig enn å huske en linje uten kontekst. Denne veiledningen gir ikke en oppfunnet komplett svarliste eller påstår at å løse spillet bekrefter profesjonelle CSS ferdigheter. Den koblede avspillingssiden gir redaktøren kontroller og nøyaktig oppgaveinnramming; senteret støtter forståelse og praksis på tvers av nivåene du faktisk møter.
For eksempel, hvis en regel endrer froskene vertikalt når du hadde tenkt horisontal bevegelse, inspiser flex-direction og identifiser gjeldende hovedakse før du velger en annen verdi. Si forholdet høyt: denne egenskapen endrer distribusjon langs hovedaksen, og hovedaksen går for øyeblikket i denne retningen. Gjør deretter én redigering og inspiser resultatet. Når det fungerer, test forklaringen din mot de synlige liljeputene. Dette gjør en mislykket gjetning til en gjenbrukbar layoutidé i stedet for en kommando du bare husker for én skjerm.
Flexbox Froggy tips og strategi
Kryss av et tips for neste runde. Denne listen endrer ikke spillet og lagrer ikke fremgangen din.
Flexbox Froggy spørsmål og svar
Trenger jeg å installere et kodeverktøy?
Nei. CSS-editoren er inne i nettleserspillet.
Er dette et komplett kurs i webutvikling?
Det er et interaktivt øvingsspill for flexbox-layoutkonsepter. Det erstatter ikke et bredere HTML- og CSS-kurs.
Hvem skapte prosjektet?
Thomas Park skapte Flexbox Froggy. Kilden er MIT-lisensiert, og det innspilte kunstverket bruker CC BY 3.0; attribusjonslenker finner du nedenfor.
Hvorfor skifter flex-end side når retningen snus?
Start og slutt følger hovedaksen, ikke faste venstre og høyre kanter. Med row-reverse starter aksen til høyre, så justify-content: flex-end plasserer elementene til venstre. Sjekk flex-direction først. align-items endrer tverraksen og løser et annet plasseringsproblem.