CSS Flexbox lernen mit Flexbox Froggy

Flexbos Froggy Screenshot

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 Reset vs. Normalize Die Tage ging ein Aufschrei durch Twitter: die HTML5-Boilerplate hat den CSS-Reset raus geworfen, und durch ein Normalize ersetzt. Ich war relativ ers...
piCSSel-art – Lustige C64 Sprites in CSS Dieser ganze HTML5-Spiele-Hype erinnert mich in seinen Resultaten immer mehr an den C64. Immer mehr Klassiker kommen für iOs auf den Markt, ohne das m...
CSScomb – Sortieren einer CSS-Datei Die Übernahme von komplexen Seiten dritter ist kein Spaß, aber leider Alltag. In der Regel sieht dieses Szenario bei mir so aus: irgendein Hobby-Frick...
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...

Ein Kommentar

  • 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