CSS-Flexbox – Wie funktioniert das? Flexbox Froggy

Flexbox froggy

Hilfe, ich kapier Flexbox-Froggy nicht.

Wie geht das genau?

Eine interessante Möglichkeit CSS-Code zu lernen für Leute, die in die Programmierung einsteigen ist Flexbox Froggy.

Interaktives Lernspiel

Flexbox Froggy ist ein interaktives Lernspiel, mit dem man auf spielerische Weise die Grundlagen von CSS Flexbox lernen kann. In dem Spiel hilft man einem Frosch, auf die richtigen Seerosenblätter zu springen, indem man Flexbox-Befehle eingibt. Jede Aufgabe führt eine neue Flexbox-Eigenschaft ein, wie z. B. justify-content, align-items oder flex-direction. So lernt man Schritt für Schritt, wie Flexbox funktioniert – direkt im Browser, mit Sofort-Feedback.

Ausführliche Erklärung: – Hintergrund – Wissen

Nehmen wir an, du möchtest eine Webseite über Frösche programmieren

Nehmen wir an, du möchtest in die Frontend-Entwicklung einsteigen. Frontend-Entwicklung ist das was du siehst auf einer Webseite. Du siehst, die Texte, die Bilder etc. Du willst also eine eigene Webseite bauen. Das heißt, du solltest dich zunächst mit der Markup-Sprache HTML auseinandersetzen, wenn du z. B. eine Webseite bauen möchtest. HTML ist ja keine Programmiersprache sondern eine sogenannte Markup-Sprache, eine Auszeichnungssprache. Mit HTML kannst du ein sogenanntes Programmiergerüst bauen in Visual-Studio-Code.

Das Problem – Du benötigst CSS- Code

Das Problem HTML ist nur eine Markup-Sprache, du kannst damit nicht bestimmen, wo sollen denn die Elemente, die Bilder ( Frosch-Bilder) usw genau platziert werden auf deiner Webseite? Dafür benötigst du CSS-Code.

Je nachdem, wo du den Frosch haben möchtest, gibst du den entsprechenden CSS-Code ein und der Frosch wird dann entsprechend oben, unten, rechts, oder links angeordnet. Es ist wichtig, dass du dich im Bereich CSS sehr gut auskennst. Mit CSS-Code kann man nicht nur bestimmen, wo sollen die Bilder hin, wie soll der Hintergrund aussehen, sondern du kannst eben auch damit die gesamte farbliche Gestaltung im Code festlegen. Wenn du CSS – Code lernen willst, dann schau dich im Cyberraum 0 um.

Wozu braucht man Flexbox?

Flexbox (Kurzform für Flexible Box Layout) ist ein CSS-Layout-Modell, mit dem man:

• Elemente einfach ausrichten kann – z. B. zentrieren, verteilen, rechts oder links anordnen
• Platz dynamisch aufteilen kann – je nachdem, wie viel Platz verfügbar ist
• Layouts responsive gestalten kann – also anpassbar für verschiedene Bildschirmgrößen
• Höhen und Breiten flexibel steuern kann, auch wenn der Inhalt sich verändert

Die Webseite findest du hier Flexbox-Froggy – Versuche den Frosch einfach mal zu bewegen.

Erklärung Video (englisch) 16 Minuten

Auf dem Elternelement (display: flex; ist standardmäßig aktiviert):

• justify-content: bestimmt die horizontale Ausrichtung (z. B. flex-start, center, flex-end, space-between, space-around, space-evenly)
• align-items: bestimmt die vertikale Ausrichtung (z. B. flex-start, center, flex-end, stretch, baseline)
• flex-direction: bestimmt die Hauptrichtung (z. B. row, row-reverse, column, column-reverse)
• flex-wrap: ob die Elemente umbrechen dürfen (nowrap, wrap, wrap-reverse)
• align-content: bei mehreren Zeilen – wie die Zeilen vertikal verteilt werden

Auf dem Element (also z. B. dem Frosch):

• align-self: überschreibt align-items für ein einzelnes Element
• order: bestimmt die Reihenfolge (niedrige Werte zuerst)
• flex-grow: bestimmt, wie viel Platz ein Element bekommt (z. B. flex-grow: 1;)