Flexbox und Grid Cheat Sheet (interaktiv) mit Tailwind | We.Inc
Jede Flexbox- und CSS-Grid-Eigenschaft an einem Live-Container, den du ändern kannst, ein Builder für grid-template-areas, eine Entscheidungshilfe für Flex oder Grid und Tailwind-Klassen.
Flexbox und Grid Cheat Sheet
Flexbox ordnet Elemente in einer Richtung an, als Zeile oder Spalte, und eignet sich am besten für Toolbars, Navigationsleisten und Zentrieren. Grid platziert Elemente gleichzeitig in Zeilen und Spalten und passt zu Seitenlayouts und Kartengalerien. Setze display: flex oder display: grid am Elternelement und verwende dann die Eigenschaften unten; jede aktualisiert hier einen Live-Container.
Flexbox oder Grid?
Layout
Wahl
Ein Element in einer Box zentrieren
Beides: Grid mit place-items: center ist am kürzesten
Eine Reihe von Buttons oder Navigationslinks
Flexbox
Elemente unbekannter Breite, die umbrechen sollen
Flexbox mit flex-wrap
Karten in gleich breiten Spalten
Grid mit repeat(auto-fill, minmax())
Header, Sidebar, Hauptbereich, Footer
Grid mit grid-template-areas
Elemente über Zeilen und Spalten hinweg ausrichten
Grid
Zwei Live-Container, einer mit Flex und einer mit Grid, mit einem Regler für jede Container-Eigenschaft und für ein ausgewähltes Element. Jede Änderung zeigt das CSS und die Tailwind-Klasse. Darunter malst du ein Seitenlayout in den Builder für grid-template-areas und kopierst das Ergebnis. Die Referenztabellen lassen sich sauber drucken.
Ändere mit den Flexbox-Reglern den Container und wähle dann ein Element, um grow, shrink, basis, order und align-self auszuprobieren.
Mach dasselbe im Grid-Playground, einschließlich Spans, die ein Element über mehrere Spalten oder Zeilen strecken.
Wähle im Areas-Builder einen Bereichsnamen und klicke auf Zellen, um sie einzufärben. Das CSS für den Container und jeden Bereich erscheint darunter.
Drück Drucken, um die Eigenschaftstabellen auf Papier oder als PDF zu bekommen.
Beginne mit gap für Abstände zwischen Elementen statt mit margins. Es fügt nur Abstand zwischen Elementen ein, nie an den äußeren Rändern.
flex: 1 an jedem Element ergibt gleich breite Spalten, die trotzdem auf ihren Inhalt reagieren; Grid mit 1fr-Spalten ignoriert die Inhaltsbreite.
Nutze order und Grid-Platzierung nur für visuelle Anpassungen. Tastatur- und Screenreader-Nutzer folgen der Quelltextreihenfolge, daher sollte die HTML-Reihenfolge weiterhin Sinn ergeben.
minmax(0, 1fr) statt 1fr verhindert, dass ein langes Wort oder ein breites Bild eine Grid-Spalte über ihren Anteil hinaus aufbläht.
Häufige Fragen
Was ist der Unterschied zwischen justify-content und align-items?
justify-content wirkt entlang der Hauptachse, die in einer Flex-Zeile von links nach rechts verläuft. align-items wirkt quer dazu, in einer Zeile von oben nach unten. Stellst du flex-direction auf column, tauschen die beiden ihre physischen Richtungen, weshalb Zentrieren manchmal die falsche Eigenschaft zu nutzen scheint.
Warum bewirkt justify-content nichts?
Es wirkt nur, wenn auf der Hauptachse freier Platz vorhanden ist. Hat ein Element flex-grow: 1 oder füllen die Elemente die Zeile, bleibt nichts zu verteilen. In Grid verschiebt justify-content die gesamte Menge der Spuren, während justify-items Elemente innerhalb ihrer eigenen Zellen ausrichtet.
Wie funktionieren grid-template-areas?
Du zeichnest das Layout als Strings, einen pro Zeile, mit einem Namen für jede Zelle, etwa "header header" "side main". Jedes Kind beansprucht dann mit grid-area: header einen Namen. Bereiche müssen Rechtecke bilden, und ein Punkt markiert eine leere Zelle.
Kann ich Flexbox innerhalb von Grid verwenden?
Ja, das ist üblich. Grid platziert die großen Bereiche oder Karten, und Flexbox ordnet den Inhalt in jedem davon an, etwa ein Icon neben einer Beschriftung oder einen Footer, der am unteren Rand einer Karte fixiert ist.
Wird gap in Flexbox unterstützt?
Ja. Alle aktuellen großen Browser unterstützen gap in Flex-Containern genauso wie in Grid, daher ist der alte Trick mit negativen margins am Container nicht mehr nötig.
Die zwei Achsen
Jeder Flex-Container hat eine durch flex-direction festgelegte Hauptachse und eine rechtwinklig dazu verlaufende Querachse. Eigenschaften, die mit justify beginnen, wirken auf die Hauptachse, und Eigenschaften, die mit align beginnen, auf die Querachse. Sobald das sitzt, werden die meisten Flexbox-Rätsel zu der Frage, welche Achse du meinst.
Grid hat stattdessen ein festes Achsenpaar: inline (meist horizontal) und block (meist vertikal). justify-* richtet entlang der Inline-Achse aus und align-* entlang der Block-Achse, sowohl für das gesamte Grid als auch für Elemente in ihren Zellen.
Wie Flex-Elemente ihre Größe bestimmen
Jedes Element startet bei seiner flex-basis, oder bei seiner Inhaltsgröße, wenn basis auto ist. Bleibt in der Zeile Platz übrig, wird der freie Raum im Verhältnis zu flex-grow verteilt. Ist die Zeile zu voll, schrumpfen Elemente im Verhältnis zu flex-shrink multipliziert mit ihrer basis.
Die Kurzschreibweise flex: 1 bedeutet grow 1, shrink 1, basis 0%, sodass jedes Element unabhängig vom Inhalt gleich breit wird. flex: auto behält die Inhaltsgröße als Ausgangspunkt, sodass längere Beschriftungen breitere Boxen bekommen.
Responsive Grids ohne Media Queries
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) passt so viele Spalten von mindestens 220 Pixeln ein, wie der Container zulässt, und streckt sie, bis die Zeile gefüllt ist. Karten fließen von einer Spalte auf dem Handy zu vier oder fünf auf einem breiten Bildschirm, ganz ohne Breakpoints.
auto-fit verhält sich genauso, bis es weniger Elemente als Spalten gibt: auto-fill behält die leeren Spalten, während auto-fit sie zusammenfallen lässt, sodass sich die vorhandenen Elemente über die Zeile strecken.