Flexbox-Spielplatz
Lernen Sie Flexbox visuell kennen – drehen Sie die Eigenschaften um und beobachten Sie, wie das Layout reagiert.
So verwenden Sie Flexbox-Spielplatz
- Stellen Sie die Anzahl der Elemente so ein, dass sie in etwa Ihrem tatsächlichen Layout entspricht.
- Drehen Sie die Dropdown-Menüs um: – Richtung, Inhalt ausrichten, Elemente ausrichten, Umbruch, Lücke – und beobachten Sie die Reaktion.
- Lernen Sie die Achsenumkehr: Ändern Sie die Richtung und testen Sie „Ausrichten“ vs. „Ausrichten“ erneut – die wichtigsten Erkenntnisse der Flexbox.
- Kopieren Sie die erfolgreiche Kombination in Ihr Stylesheet Containerregel.
Was ist Flexbox-Spielplatz?
Ein Flexbox-Spielplatz ist eine interaktive Sandbox für das Hauptlayoutsystem von CSS: Dropdowns für flex-direction, justify-content, align-items, flex-wrap und gap, ein Live-Container mit Elementen, der sich neu anordnet, sobald Sie eines ändern – die Ursache-Wirkungs-Schleife, die Flexbox endgültig macht click.
Die berüchtigte Lernhürde von Flexbox ist sein Achsensystem: justify-content funktioniert entlang der Hauptachse und align-items entlang der Querachse – die sich jedoch umdreht, wenn sich die Richtung von Zeile zu Spalte ändert. Das Lesen dieses Satzes lehrt es selten; Wenn Sie das Dropdown-Menü umdrehen und ansehen, funktioniert das.
Über den Flexbox-Spielplatz
Legen Sie die Containereigenschaften fest und beobachten Sie, wie nummerierte Elemente gehorchen: Richtung Zeile oder Spalte, Ausrichtung von Flex-Start bis Space-Evenly, Ausrichtung, Umbruch, Lückengröße und Elementanzahl – jede Kombination ist sofort sichtbar.
Die Experimente, die am meisten lehren: Richtung auf Zeile festlegen, Blocksatzinhalt durch alle sechs Werte laufen lassen, dann Richtung auf Spalte wechseln und sie erneut durchlaufen – die Achsenumkehr wird in einer Minute intuitiv; Vergleichen Sie Abstand zwischen Abstand, Abstand um und Abstand gleichmäßig nebeneinander (der Unterschied im Kantenabstand, den Dokumentationsdiagramme nie ganz erreichen); und schalten Sie „Wrap“ mit einem Dutzend Elementen um, um zu sehen, wie Flex mit Überlauf umgeht.
Es dient gleichzeitig als Arbeitsreferenz: Erstellen Sie das Layout, mit dem Sie kämpfen, neu, finden Sie die Eigenschaftskombination, die das Problem behebt, und übertragen Sie die erfolgreichen Werte in Ihr CSS. Das Zentrieren eines Div – die ewige Frage – ist justify-content: center; align-items: center, hier mit zwei Klicks überprüfbar.