CSS: Tool zur Einführung in Flexbox
Der Flexbox Helfer ist ein kleines Tool, das den Einstieg ins Thema CSS Flexbox vereinfachen soll. Es zeigt einen Flexbox-Container sowie drei Flexbox-Items an. Man kann interaktiv CSS Code für den Container eingeben und so die verschiedenen flex-Eigenschaften wie "justify-content" oder "align-items" ausprobieren. Zusätzlich wird die Haupt- und Kreuzachse visualisiert, wodurch der Zusammenhang der Eigenschaften zur visuellen Darstellung verdeutlicht wird.
Die grundlegende Idee dahinter ist, dass die SuS mit dem Tool die unterschiedlichen Werte ausprobieren und anschließend die wichtigsten Erkenntnisse auf einem Arbeitsblatt (siehe Material) zusammenfassen.
Material
- Arbeitsblätter (PDF + Quellcode) sowie Lösungen kommen noch!