CSS Flexbox lernen mit Flexbox Froggy

Flexbox ist eine moderne Möglichkeit responsive und flexible Layouts zu erstellen. Dabei kann komplett auf Größenangaben und Werte wie position, float oder clear verzichtet werden. Hört sich einfach an, ist es aber nicht ;) Wenn man es einmal durchschaut hat, ist alles prima. Bis dahin kann es allerdings ein ziemlich ernüchternder Weg werden, da man wirklich noch einmal ganz von vorne beginnen muss. Vergleichbar ist das ganze vielleicht am ehesten mit dem Umstieg vom Table-Design hin zu Div-Containern.

Mit dem Spiel Flexbox Froggy kann man (auch auf Deutsch) auf ziemlich einfache und intuitive Weise lernen, wie ein flexibles Layout funktioniert. In 24 Leveln muss ein Frosch aus dem Wasser auf ein Blatt gesetzt werden. Manchmal sind andere Frösche im Weg, manchmal auch grobe Hindernisse. Am Anfang noch recht einfach wird es gegen Ende durchaus knifflig. Wer alle 24 Level geschafft hat braucht sich wohl um Flexboxen keine Sorgen mehr machen.

Ich mag die Anwendung unheimlich gerne weil sie sehr gut visualisiert, was die einzelnen Befehle mit einer Flexbox so machen. Am Anfang postioniert man nur den Frosch, aber auf einmal verschiebt man alles kreuz und quer und beschäftigt sich auch mit Abständen zwischen den einzelnen Boxen. Den Quelltext der App gibt es übrigens auf GitHub. Hier kann man sich gerne auch mal das JavaScript anschauen, was durchaus lehrreich ist.

Ähnliche Beiträge

CSS Crush – noch ein CSS Preprocessor aus De... Ich für meinen Teil bin inzwischen starker Verfechter für den Einsatz von Turbine. Der CSS Preprocessor von Peter Kröner vereinfacht mein Leben nachha...
Einfaches HTML Testing mit dem HTML Inspector Damals, als ich noch den Firefox verwendet habe, gab es ein nettes Tool mit dem man testen konnte ob HTML valide ist. Dann kam HTML5, alles wurde ande...
Bacon.js – Bezier-Kurven für Texte Das Leben eines Webworkers ist nicht einfach, vor allem dann wenn man einem Kunden erklären muss, dass ein Bild mit Transparenz - auch wenn es dreimal...
CSS Grids lernen mit Grid Garden Es ist ja noch gar nicht so lange her das ich über Flexbox Froggy berichtet habe. Mit dem Spiel kann man einfach und schnell den Umgang mit Flexboxen ...

Eine Antwort auf „CSS Flexbox lernen mit Flexbox Froggy“

  1. Ja, das Spielchen ist schon ganz cool. So macht es richtig Laune mit Flexbox herumzuspielen und die ganzen tollen Möglichkeiten kennenzulernen :)

    @Guido
    Wie bist du denn auf Flexbox Froggy aufmerksam geworden?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.