Identifizieren Sie die Achse, bevor Sie eine CSS-Eigenschaft auswählen
Lesen Sie die Ziel-Seerosenblätter des Levels und inspizieren Sie die aktuelle Anordnung der Frösche. In der Standardzeilenrichtung arbeitet justify-content entlang der horizontalen Hauptachse und align-items entlang der vertikalen Querachse. Bevor Sie einen Wert eingeben, geben Sie an, welche Achse Sie ändern möchten. Diese Angewohnheit verhindert einen häufigen Fehler: die Wahl des richtigen Wertes für eine Immobilie, der eine andere Richtung steuert.
Wenn flex-direction zur Spalte wechselt, ändern sich auch die Haupt- und Querachse. Bewerten Sie die Eigenschaft neu, anstatt davon auszugehen, dass justify-content immer eine horizontale Bewegung bedeutet. Geben Sie eine CSS Änderung im Editor ein und vergleichen Sie die resultierenden Positionen mit den Zielen. Die Frösche werden von Ihrem CSS positioniert und nicht an ihren Platz gezogen. Verwenden Sie die Hinweise und zulässigen Eigenschaften des Levels, um das Experiment an die tatsächlich gezeigte Aufgabe zu binden.
Erklären Sie eine erfolglose Änderung, bevor Sie eine andere versuchen
Wenn eine Änderung ihr Ziel verfehlt, fragen Sie, ob die Eigenschaft die falsche Achse beeinflusst hat, der gewählte Wert Elemente anders als erwartet angeordnet hat oder die aktuelle Richtung die Bedeutung des Layouts geändert hat. Behalten Sie den Teil der Regel bei, den Sie verstanden haben, und überarbeiten Sie eine Sache. Das gleichzeitige Ersetzen mehrerer Eigenschaften kann das Ziel erreichen, während Sie unsicher bleiben, welche Änderung das Problem gelöst hat.
Beschreiben Sie für eine Wiederholungsübung die erfolgreiche Regel in Worten, bevor Sie fortfahren: welche Achse sie verwendet und wie sie die Frösche relativ zu den Seerosenblättern positioniert. Auf späteren Ebenen können Ideen kombiniert werden, daher ist diese Erklärung nützlicher als das Auswendiglernen einer Zeile ohne Kontext. Dieser Leitfaden bietet keine erfundene vollständige Antwortliste und behauptet nicht, dass das Lösen des Spiels professionelle CSS-Fähigkeiten bescheinigt. Die verlinkte Play-Seite bietet dem Editor Steuerelemente und eine genaue Aufgabeneinteilung; Das Zentrum unterstützt das Verständnis und die Praxis auf allen Ebenen, denen Sie tatsächlich begegnen.
Wenn beispielsweise eine Regel die Frösche vertikal ändert, während Sie eine horizontale Bewegung beabsichtigt haben, überprüfen Sie flex-direction und identifizieren Sie die aktuelle Hauptachse, bevor Sie einen anderen Wert auswählen. Sagen Sie die Beziehung laut: Diese Eigenschaft ändert die Verteilung entlang der Hauptachse, und die Hauptachse verläuft derzeit in diese Richtung. Nehmen Sie dann eine Bearbeitung vor und prüfen Sie das Ergebnis. Sobald es funktioniert, testen Sie Ihre Erklärung anhand der sichtbaren Seerosenblätter. Dadurch wird aus einer fehlgeschlagenen Vermutung eine wiederverwendbare Layout-Idee statt eines Befehls, den Sie sich nur für einen Bildschirm merken.
Flexbox Froggy Tipps und Strategie
Markiere einen Tipp für deine nächste Runde. Diese Liste verändert das Spiel nicht und speichert keinen Spielfortschritt.
Flexbox Froggy – Fragen und Antworten
Muss ich ein Codierungstool installieren?
Nein. Der CSS-Editor ist im Browserspiel integriert.
Ist das ein vollständiger Webentwicklungskurs?
Es handelt sich um ein interaktives Übungsspiel zu Flexbox-Layoutkonzepten. Es ersetzt keinen umfassenderen HTML- und CSS-Kurs.
Wer hat das Projekt ins Leben gerufen?
Thomas Park erstellte Flexbox Froggy. Der Quellcode ist unter der MIT-Lizenz veröffentlicht, und das aufgenommene Artwork verwendet CC BY 3.0; Quellenangaben finden Sie unten.
Warum verschiebt flex-end nach einer Richtungsumkehr zur anderen Seite?
Anfang und Ende folgen der Hauptachse, nicht festen linken und rechten Rändern. Bei row-reverse beginnt die Achse rechts; justify-content: flex-end ordnet Elemente deshalb links an. Prüfe zuerst flex-direction und wähle dann die Ausrichtung. align-items wirkt auf die Querachse und löst ein anderes Positionsproblem.
Steuerung und vollständige Spielanleitung
Steuerung und vollständige Spielanleitung
Flexbox Froggy spielen