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

Schnellere Webentwicklung mit MarkerCSS? Mit all den notwendigen Browser-Workarounds, und der generellen Schreibw├╝tigkeit, die man zur Erstellung von CSS aufbieten muss, gehen derzeit viele B...
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 ...
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...
Individuelle Checkboxen ohne JavaScript Schuster bleib bei deinen Leisten ist nicht immer eine gute Idee! Vor allem dann, wenn man seine Stiefel anstatt gegen die Version aus Gummi auszutaus...

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