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

Sprite Cow – CSS Sprite nach CSS CSS Sprites sind höchst nützliche kleine Dinger, um Ladezeiten zu verkürzen, vor allem wenn man ein passendes Caching / Expire im Apache damit verbind...
SlickMap – Sitemaps schnell und einfach als ... Es gibt nicht einen Kunden, der nicht auf seiner noch so winzigen Homepage eine Sitemap haben will. Der tiefere Sinn erschliesst sich zumeist nicht. W...
Landkarten als Font – Map Glyphs Wer den Blog schon länger verfolgt weiß durchaus, das ich mich sehr viel mit der Darstellung von Objekten auf Landkarten und Umkreissuchen beschäftige...
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...

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.