FLEX / GRID / UTILITY-REFERENZ
Flexbox ordnet Inhalte entlang einer Achse. Grid beschreibt Zeilen und Spalten. Beide lassen sich mit denselben Abstands- und responsiven Varianten kombinieren.
Die Vorschauen verwenden die aktuell gewählten Demo-Einstellungen. Direkt unter jedem Beispiel steht das dazugehörige HTML.
Der Inhalt bleibt ausgerichtet und darf bei wenig Platz in die nächste Zeile umbrechen.
<div class="flex flex-wrap items-center justify-between gap-4 border rounded p-4 bg-surface">
<strong>Aktuelle Projekte</strong>
<div class="flex gap-2">
<span class="bg-subtle rounded px-3 py-2">Filter</span>
<span class="bg-accent rounded px-3 py-2">Neues Projekt</span>
</div>
</div>Die linke Fläche belegt zwei Reihen. Rechts oben erstreckt sich die Fläche über zwei Spalten.
<div class="grid grid-cols-3 grid-rows-2 gap-3 h-48">
<div class="row-span-2 bg-accent rounded p-4">Navigation</div>
<div class="col-span-2 bg-subtle rounded p-4">Übersicht</div>
<div class="border rounded p-4">Daten</div>
<div class="border rounded p-4">Status</div>
</div>Diese Tabellen werden direkt aus den vorhandenen Utility-Regeln erzeugt. Sie zeigen Basisklassen; responsive und Zustandsvarianten sind unter Responsive Layouts & Zustände erklärt.
flex-1 nimmt verfügbaren Platz ein. shrink-0 verhindert das Schrumpfen eines Elements.
| Klasse | CSS |
|---|---|
flex | display:flex |
inline-flex | display:inline-flex |
flex-row | flex-direction:row |
flex-col | flex-direction:column |
flex-wrap | flex-wrap:wrap |
flex-nowrap | flex-wrap:nowrap |
flex-1 | flex:1 1 0% |
flex-none | flex:none |
grow | flex-grow:1 |
shrink-0 | flex-shrink:0 |
flex-row-reverse | flex-direction:row-reverse |
flex-col-reverse | flex-direction:column-reverse |
12 unterstützte Basisklassen in dieser Gruppe.
items-* richtet Elemente auf der Querachse aus, justify-* auf der Hauptachse. self-* überschreibt die Ausrichtung eines einzelnen Elements.
| Klasse | CSS |
|---|---|
items-start | align-items:flex-start |
items-center | align-items:center |
items-end | align-items:flex-end |
items-stretch | align-items:stretch |
justify-start | justify-content:flex-start |
justify-center | justify-content:center |
justify-end | justify-content:flex-end |
justify-between | justify-content:space-between |
justify-around | justify-content:space-around |
self-center | align-self:center |
items-baseline | align-items:baseline |
self-start | align-self:flex-start |
self-end | align-self:flex-end |
self-stretch | align-self:stretch |
place-items-center | place-items:center |
content-center | align-content:center |
content-between | align-content:space-between |
17 unterstützte Basisklassen in dieser Gruppe.
Die Zahl beschreibt gleich große Tracks. auto-rows-fr stellt gleich große automatische Zeilen bereit.
| Klasse | CSS |
|---|---|
grid | display:grid |
grid-cols-1 | grid-template-columns:repeat(1,minmax(0,1fr)) |
grid-cols-2 | grid-template-columns:repeat(2,minmax(0,1fr)) |
grid-cols-3 | grid-template-columns:repeat(3,minmax(0,1fr)) |
grid-cols-4 | grid-template-columns:repeat(4,minmax(0,1fr)) |
grid-cols-5 | grid-template-columns:repeat(5,minmax(0,1fr)) |
grid-cols-6 | grid-template-columns:repeat(6,minmax(0,1fr)) |
grid-cols-7 | grid-template-columns:repeat(7,minmax(0,1fr)) |
grid-cols-8 | grid-template-columns:repeat(8,minmax(0,1fr)) |
grid-cols-9 | grid-template-columns:repeat(9,minmax(0,1fr)) |
grid-cols-10 | grid-template-columns:repeat(10,minmax(0,1fr)) |
grid-cols-11 | grid-template-columns:repeat(11,minmax(0,1fr)) |
grid-cols-12 | grid-template-columns:repeat(12,minmax(0,1fr)) |
grid-rows-1 | grid-template-rows:repeat(1,minmax(0,1fr)) |
grid-rows-2 | grid-template-rows:repeat(2,minmax(0,1fr)) |
grid-rows-3 | grid-template-rows:repeat(3,minmax(0,1fr)) |
grid-rows-4 | grid-template-rows:repeat(4,minmax(0,1fr)) |
grid-rows-5 | grid-template-rows:repeat(5,minmax(0,1fr)) |
grid-rows-6 | grid-template-rows:repeat(6,minmax(0,1fr)) |
grid-flow-row | grid-auto-flow:row |
grid-flow-col | grid-auto-flow:column |
grid-flow-dense | grid-auto-flow:dense |
auto-rows-auto | grid-auto-rows:auto |
auto-rows-fr | grid-auto-rows:minmax(0,1fr) |
24 unterstützte Basisklassen in dieser Gruppe.
span-* beschreibt die Anzahl belegter Tracks, start/end benennt die Rasterlinie. full erstreckt sich über das gesamte Raster.
| Klasse | CSS |
|---|---|
col-span-1 | grid-column:span 1/span 1 |
col-span-2 | grid-column:span 2/span 2 |
col-span-3 | grid-column:span 3/span 3 |
col-span-4 | grid-column:span 4/span 4 |
col-span-5 | grid-column:span 5/span 5 |
col-span-6 | grid-column:span 6/span 6 |
col-span-7 | grid-column:span 7/span 7 |
col-span-8 | grid-column:span 8/span 8 |
col-span-9 | grid-column:span 9/span 9 |
col-span-10 | grid-column:span 10/span 10 |
col-span-11 | grid-column:span 11/span 11 |
col-span-12 | grid-column:span 12/span 12 |
row-span-1 | grid-row:span 1/span 1 |
row-span-2 | grid-row:span 2/span 2 |
row-span-3 | grid-row:span 3/span 3 |
row-span-4 | grid-row:span 4/span 4 |
row-span-5 | grid-row:span 5/span 5 |
row-span-6 | grid-row:span 6/span 6 |
col-start-1 | grid-column-start:1 |
col-end-1 | grid-column-end:1 |
row-start-1 | grid-row-start:1 |
row-end-1 | grid-row-end:1 |
col-start-2 | grid-column-start:2 |
col-end-2 | grid-column-end:2 |
row-start-2 | grid-row-start:2 |
row-end-2 | grid-row-end:2 |
col-start-3 | grid-column-start:3 |
col-end-3 | grid-column-end:3 |
row-start-3 | grid-row-start:3 |
row-end-3 | grid-row-end:3 |
col-start-4 | grid-column-start:4 |
col-end-4 | grid-column-end:4 |
row-start-4 | grid-row-start:4 |
row-end-4 | grid-row-end:4 |
col-start-5 | grid-column-start:5 |
col-end-5 | grid-column-end:5 |
row-start-5 | grid-row-start:5 |
row-end-5 | grid-row-end:5 |
col-start-6 | grid-column-start:6 |
col-end-6 | grid-column-end:6 |
row-start-6 | grid-row-start:6 |
row-end-6 | grid-row-end:6 |
col-start-7 | grid-column-start:7 |
col-end-7 | grid-column-end:7 |
row-start-7 | grid-row-start:7 |
row-end-7 | grid-row-end:7 |
col-start-8 | grid-column-start:8 |
col-end-8 | grid-column-end:8 |
row-start-8 | grid-row-start:8 |
row-end-8 | grid-row-end:8 |
col-start-9 | grid-column-start:9 |
col-end-9 | grid-column-end:9 |
row-start-9 | grid-row-start:9 |
row-end-9 | grid-row-end:9 |
col-start-10 | grid-column-start:10 |
col-end-10 | grid-column-end:10 |
row-start-10 | grid-row-start:10 |
row-end-10 | grid-row-end:10 |
col-start-11 | grid-column-start:11 |
col-end-11 | grid-column-end:11 |
row-start-11 | grid-row-start:11 |
row-end-11 | grid-row-end:11 |
col-start-12 | grid-column-start:12 |
col-end-12 | grid-column-end:12 |
row-start-12 | grid-row-start:12 |
row-end-12 | grid-row-end:12 |
col-start-13 | grid-column-start:13 |
col-end-13 | grid-column-end:13 |
row-start-13 | grid-row-start:13 |
row-end-13 | grid-row-end:13 |
col-span-full | grid-column:1/-1 |
row-span-full | grid-row:1/-1 |
col-start-auto | grid-column-start:auto |
row-start-auto | grid-row-start:auto |
74 unterstützte Basisklassen in dieser Gruppe.
Die visuelle Reihenfolge verändert nicht die logische Lesereihenfolge. Setze sie deshalb bewusst ein.
| Klasse | CSS |
|---|---|
order-1 | order:1 |
order-2 | order:2 |
order-3 | order:3 |
order-4 | order:4 |
order-5 | order:5 |
order-6 | order:6 |
order-7 | order:7 |
order-8 | order:8 |
order-9 | order:9 |
order-10 | order:10 |
order-11 | order:11 |
order-12 | order:12 |
order-first | order:-9999 |
order-last | order:9999 |
14 unterstützte Basisklassen in dieser Gruppe.
Klassen lassen sich mit Komponenten, eigenen CSS-Regeln und den gemeinsamen --r-*-Variablen kombinieren. Dichte und Schriftgröße bleiben unabhängig. Die Syntax frei formulierter Klassen wie p-[13px] ist noch nicht implementiert.
Zur durchsuchbaren Gesamtübersicht · Farben und eigene Variablen