Identificer aksen, før du vælger en CSS egenskab
Læs niveauets målliljepuder og inspicér det aktuelle arrangement af frøer. I standardrækkeretningen arbejder justify-content langs den vandrette hovedakse og align-items langs den lodrette tværakse. Inden du indtaster en værdi, skal du angive, hvilken akse du vil ændre. Denne vane forhindrer en almindelig fejl: at vælge den rigtige værdi for en ejendom, der styrer en anden retning.
Når flex-direction skifter til kolonne, ændres hoved- og tværaksen med den. Reevaluer egenskaben i stedet for at antage, at justify-content altid betyder horisontal bevægelse. Indtast én CSS ændring i editoren og sammenlign de resulterende positioner med målene. Frøerne er placeret af din CSS, ikke trukket på plads. Brug niveauets tip og tilladte egenskaber til at holde eksperimentet bundet til den faktisk viste opgave.
Forklar en mislykket ændring, før du prøver en anden
Efter en ændring overser målet, spørg, om egenskaben påvirkede den forkerte akse, den valgte værdi arrangerede elementer anderledes end din forventning, eller den aktuelle retning ændrede betydningen af layoutet. Overhold den del af reglen, du forstår, og revider én ting. Udskiftning af flere egenskaber på én gang kan nå målet, samtidig med at du er usikker på, hvilken ændring der løste problemet.
For en gennemgangsøvelse, beskriv den succesrige regel i ord, før du går videre: hvilken akse den brugte, og hvordan den placerede frøerne i forhold til liljebeklædningerne. Senere niveauer kan kombinere ideer, så denne forklaring er mere nyttig end at huske en linje uden dens kontekst. Denne guide giver ikke en opfundet komplet svarliste eller påstår, at løsning af spillet bekræfter professionelle CSS færdigheder. Den tilknyttede afspilningsside giver editoren kontrol og nøjagtig opgaveindramning; centret understøtter forståelse og praksis på tværs af de niveauer, du faktisk møder.
For eksempel, hvis en regel ændrer frøerne lodret, da du havde til hensigt horisontal bevægelse, skal du inspicere flex-direction og identificere den aktuelle hovedakse, før du vælger en anden værdi. Sig forholdet højt: denne egenskab ændrer fordeling langs hovedaksen, og hovedaksen løber i øjeblikket i denne retning. Foretag derefter én redigering og inspicér resultatet. Når det virker, test din forklaring mod de synlige liljepuder. Dette forvandler et mislykket gæt til en genanvendelig layoutidé i stedet for en kommando, du kun husker for én skærm.
Flexbox Froggy tips og strategi
Markér et tip til din næste runde. Listen ændrer ikke spillet og gemmer ikke dine fremskridt.
Flexbox Froggy spørgsmål og svar
Skal jeg installere et kodeværktøj?
Nej. CSS-editoren findes i browserspillet.
Er dette et komplet webudviklingskursus?
Det er et interaktivt øvelsesspil til flexbox-layoutkoncepter. Det erstatter ikke et bredere HTML- og CSS-kursus.
Hvem skabte projektet?
Thomas Park skabte Flexbox Froggy. Kilden er MIT-licenseret, og det indspillede kunstværk bruger CC BY 3.0; attributionslinks findes nedenfor.
Hvorfor skifter flex-end side, når retningen vendes?
Start og slut følger hovedaksen, ikke faste venstre og højre kanter. Med row-reverse starter aksen til højre, så justify-content: flex-end placerer elementer til venstre. Tjek flex-direction først. align-items justerer tværaksen og løser derfor et andet placeringsproblem.