Identificeer de as voordat u een CSS eigenschap kiest
Lees de doellelies van het level en inspecteer de huidige opstelling van kikkers. In de standaard rijrichting werkt justify-content langs de horizontale hoofdas en align-items langs de verticale dwarsas. Voordat u een waarde typt, geeft u aan welke as u wilt wijzigen. Deze gewoonte voorkomt een veelgemaakte fout: het kiezen van de juiste waarde voor een eigenschap die een andere richting uitgaat.
Wanneer flex-direction verandert in kolom, veranderen de hoofd- en dwarsas mee. Evalueer de eigenschap opnieuw in plaats van aan te nemen dat justify-content altijd horizontale beweging betekent. Voer één CSS wijziging in de editor in en vergelijk de resulterende posities met de doelen. De kikkers worden door jouw CSS gepositioneerd en niet op hun plaats gesleept. Gebruik de hints en toegestane eigenschappen van het niveau om het experiment gebonden te houden aan de daadwerkelijk getoonde taak.
Leg een mislukte wijziging uit voordat u een andere probeert
Nadat een wijziging het doel heeft gemist, vraagt u zich af of de eigenschap de verkeerde as heeft beïnvloed, de gekozen waarde de items anders heeft gerangschikt dan u had verwacht, of dat de huidige richting de betekenis van de lay-out heeft veranderd. Bewaar het deel van de regel dat u begrijpt en herzie één ding. Als u meerdere eigenschappen tegelijk vervangt, kunt u het doel bereiken, terwijl u niet zeker weet welke wijziging het probleem heeft opgelost.
Beschrijf voor een herhalingsoefening de succesvolle regel in woorden voordat je verder gaat: welke as werd gebruikt en hoe de kikkers werden gepositioneerd ten opzichte van de waterlelies. Op latere niveaus kunnen ideeën worden gecombineerd, dus deze uitleg is nuttiger dan het onthouden van een regel zonder context. Deze gids biedt geen verzonnen volledige antwoordenlijst en beweert niet dat het oplossen van het spel een bewijs is van professionele CSS-vaardigheid. De gekoppelde afspeelpagina geeft de editor bedieningselementen en exacte taakkaders; het centrum ondersteunt begrip en oefening op de niveaus die je daadwerkelijk tegenkomt.
Als een regel bijvoorbeeld de kikkers verticaal verandert terwijl je een horizontale beweging bedoelde, inspecteer dan flex-direction en identificeer de huidige hoofdas voordat je een andere waarde selecteert. Zeg de relatie hardop: deze eigenschap verandert de verdeling langs de hoofdas, en de hoofdas loopt momenteel in deze richting. Voer vervolgens één bewerking uit en bekijk het resultaat. Zodra het werkt, test je je uitleg aan de zichtbare waterlelies. Hierdoor wordt een mislukte gok omgezet in een herbruikbaar lay-outidee in plaats van een opdracht die u slechts voor één scherm onthoudt.
Tips en strategieën voor de Flexbox Froggy
Vink een tip aan voor je volgende ronde. Deze lijst verandert het spel niet en slaat je spelvoortgang niet op.
Vragen en antwoorden over de Flexbox Froggy
Moet ik een programmeerprogramma installeren?
Nee. De CSS-editor bevindt zich in het browserspel.
Is dit een complete webdevelopmentcursus?
Dit is een interactief oefenspel voor flexbox-layoutconcepten. Het vervangt geen uitgebreidere HTML- en CSS-cursus.
Wie heeft het project bedacht?
Thomas Park creëerde Flexbox Froggy. De bron is gelicentieerd onder de MIT-licentie en de opgenomen artwork maakt gebruik van CC BY 3.0; links naar de bronvermelding staan hieronder.
Waarom wisselt flex-end van kant wanneer de richting omkeert?
Begin en einde volgen de hoofdas, niet vaste linker- en rechterranden. Bij row-reverse begint de as rechts; justify-content: flex-end plaatst elementen daarom links. Controleer eerst flex-direction. align-items past de dwarsas aan en lost dus een ander plaatsingsprobleem op.