Buntmacher

veröffentlicht vor einem Jahr

Wer wollte nicht schon immer einmal Frösche schieben oder Kanonentürme platzieren um mittels CSS das Prinzip einer Flexbox zu lernen?

Jeder, der sich etwas näher mit CSS3 beschäftigt stößt unmittelbar oder spätestens bei der Nutzung flexibler Layouts (Stichwort: Responsive) auf die Eigenschaft display: flex; und ihre Komplexität. Da anders als bei den bisherigen display-Eigenschaften kann man hier dank CSS3 ein Layout sehr flexibel seinen Vorstellungen oder den seiner Kunden anpassen.

Eventuell wichtig zu wissen wäre für den Start noch, dass display: flex; unter mittlerweile jedem neuen Browser einfach zur Anwendung kommen kann (caniuse.com).

Jetzt der spielerische Teil

Mit den folgenden beiden Links könnt Ihr euch ganz einfach mittels Fröschen und einer kurzen Erklärung durch 24 Level programmieren/spielen. Flexbox Froggy bietet euch eine einfache Plattform die Thematik Flexbox einmal in kurzer Zeit und mit hohem Lernfaktor anzugehen. Bei dem ausrichten der verschiedenen Frösche in verschiedenen Farben lernt man recht fix die verschiedenen weiteren zugehörigen Eigenschaften der verschiedenen Flexbox-Ebenen und diese einzusetzen.

Wer keine Frösche mag, trotzdem sich aber der Flexbox-Thematik nähern möchte, kann dies auch mittels eines Tower-Defense machen. In Flexbox Defense werden Kanonentürme via CSS-Flexbox auf der Karte verteilt, möglichst nah an der Route um im Anschluss Wellen von Lila-Kreisen die HP zu minimieren. In jeder der 12 Level werden verschiedene Flexbox-Eigenschaften benötigt um die Kanonentürme effektiv zu verteilen um das Level erfolgreich von Lila-Kreisen zu befreien.

Hier der Flexbox Überblick

Um sich grundsätzlich mit dem Thema Flexbox zu beschäftigen kann ich nur die Übersicht von CSS-Tricks empfehlen (Englischkenntnisse vorausgesetzt). Hier wird das Grundverständnis von Flexbox anhand einfacher Strukturgrafiken bis hin zu allen einzelnen Möglichkeiten und Einstellungen getrennt für Parent- und Child-Element erklärt. Dabei werden am Ende auch noch einfache Beispiele gereicht um das Verständnis und den Einsatzzweck sinnvoll zu ergänzen.

Quelle: Titelbild © John Blyberg (flickr.com/CC BY 2.0)

Kurz-Link kopieren:
David

Über den Author, David

Hej, ich bin David und derjenige, der hinter Buntmacher® steht. Ich bin Mediendesigner und Webentwickler. Ich realisiere seit vielen Jahren Projekte mit unterschiedlichsten Anforderungen. Falls Ihr mir folgen wollt, könnt Ihr das auf Twitter tun.

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

© 2017, Buntmacher • Alle Rechte vorbehalten.