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

ProCSSor – Der CSS Prettifier Sagen wir mal so: Es existieren für verschiedene Sprachen durchaus Standards, wie Quelltext auszusehen hat, aber keiner hält sich dran. Für das Zend F...
Mit Pow.js Sonnenstrahlen generieren Einen Hintergrund aus Sonnenstrahlen ist eine feine Sache, aber faktisch nicht implementierbar. Die Grafik die dafür notwendig wäre, wäre eindeutig zu...
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...
EmChart – Em einfach nachschlagen Früher, als noch alles besser war, hat man jede Font-Größe in px oder pt angegeben. Wie sich im nachhinein herausstellte ist das eine ziemlich doofe I...

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.