Identifiera axeln innan du väljer en CSS egenskap
Läs nivåns målliljekuddar och inspektera det aktuella arrangemanget av grodor. I standardradriktningen arbetar justify-content längs den horisontella huvudaxeln och align-items längs den vertikala tväraxeln. Innan du skriver ett värde, ange vilken axel du vill ändra. Denna vana förhindrar ett vanligt misstag: att välja rätt värde för en fastighet som styr en annan riktning.
När flex-direction ändras till kolumn ändras huvud- och tväraxeln med den. Omvärdera egenskapen istället för att anta att justify-content alltid betyder horisontell rörelse. Ange en CSS ändring i editorn och jämför de resulterande positionerna med målen. Grodorna är placerade av din CSS, inte släpade på plats. Använd nivåns tips och tillåtna egenskaper för att hålla experimentet kopplat till den uppgift som faktiskt visas.
Förklara en misslyckad ändring innan du provar en annan
Efter att en förändring missat målet, fråga om egenskapen påverkade fel axel, det valda värdet ordnade objekt annorlunda än vad du förväntade dig, eller om den aktuella riktningen ändrade innebörden av layouten. Behåll den del av regeln du förstår och revidera en sak. Att byta ut flera egenskaper samtidigt kan nå målet samtidigt som du blir osäker på vilken förändring som löste problemet.
För en genomgångsövning, beskriv den framgångsrika regeln i ord innan du går vidare: vilken axel den använde och hur den placerade grodorna i förhållande till liljeskydden. Senare nivåer kan kombinera idéer, så den här förklaringen är mer användbar än att memorera en rad utan dess sammanhang. Den här guiden tillhandahåller inte en påhittad komplett svarslista eller påstår att lösa spelet certifierar professionella CSS skicklighet. Den länkade spelsidan ger redigeraren kontroller och exakt uppgiftsinramning; centret stödjer förståelse och praktik över de nivåer du faktiskt möter.
Till exempel, om en regel ändrar grodorna vertikalt när du avsåg horisontell rörelse, inspektera flex-direction och identifiera den aktuella huvudaxeln innan du väljer ett annat värde. Säg förhållandet högt: den här egenskapen ändrar fördelningen längs huvudaxeln, och huvudaxeln löper för närvarande i denna riktning. Gör sedan en redigering och inspektera resultatet. När det fungerar, testa din förklaring mot de synliga liljekuddarna. Detta förvandlar en misslyckad gissning till en återanvändbar layoutidé istället för ett kommando som du bara kommer ihåg för en skärm.
Flexbox Froggy tips och strategi
Markera ett tips att öva på nästa omgång. Listan ändrar inte spelet och sparar inte dina framsteg.
Flexbox Froggy frågor och svar
Behöver jag installera ett kodningsverktyg?
Nej. CSS-redigeraren finns i webbläsarspelet.
Är detta en komplett kurs i webbutveckling?
Det är ett interaktivt övningsspel för flexbox-layoutkoncept. Det ersätter inte en bredare HTML- och CSS-kurs.
Vem skapade projektet?
Thomas Park skapade Flexbox Froggy. Källan är MIT-licensierad och det inspelade verket använder CC BY 3.0; attributionslänkar finns nedan.
Varför byter flex-end sida när riktningen vänds?
Start och slut följer huvudaxeln, inte fasta vänster- och högerkanter. Med row-reverse börjar axeln till höger, så justify-content: flex-end placerar till vänster. Kontrollera flex-direction först. align-items ändrar tväraxeln och löser ett annat placeringsproblem.
Kontroller och fullständiga instruktioner
Kontroller och fullständiga instruktioner
Spela Flexbox Froggy