⚡CSS Layout

Flexbox meistern

Das Layout-Tool das du jeden Tag brauchst

Flexbox ist das Grundwerkzeug fuer jedes Web-Layout. Navigation, Cards, Formulare, alles nutzt Flexbox. Wenn du drei Konzepte verstehst, flex-direction, justify-content und align-items, kannst du 90 Prozent aller Layouts bauen.

Pro-Tip — Der schnelle Weg
Merk dir: justify ist die Hauptachse, align ist die Querachse. Bei flex-row ist justify horizontal und align vertikal. Bei flex-col ist es genau umgekehrt.
Seite 1
1

Flex-Container erstellen

Jedes Flex-Layout startet mit display flex auf dem Container. Standardmaessig werden Kinder nebeneinander angeordnet. Mit flex-col untereinander.

<!-- Horizontal -->
<div className="flex gap-4">
 <div>Links</div>
 <div>Rechts</div>
</div>


<!-- Vertikal -->
<div className="flex flex-col gap-4">
 <div>Oben</div>
 <div>Unten</div>
</div>
2

Ausrichtung steuern

justify-content verteilt Elemente auf der Hauptachse. align-items richtet sie auf der Querachse aus. Die haeufigsten Kombis: center/center, between/center, end/center.

<!-- Zentriert -->
<div className="flex items-center justify-center h-screen">
 <div>Perfekt zentriert</div>
</div>


<!-- Space Between -->
<nav className="flex items-center justify-between p-4">
 <Logo />
 <Menu />
</nav>
3

Flex-Grow und Shrink

flex-1 laesst ein Element den verfuegbaren Platz fuellen. Perfekt fuer Layouts wo ein Bereich flexibel und der andere fest sein soll.

<div className="flex h-screen">
 <aside className="w-64">Sidebar</aside>
 <main className="flex-1">Content fuellt den Rest</main>
</div>
4

Wrapping aktivieren

Standardmaessig quetscht Flex alle Elemente in eine Zeile. Mit flex-wrap brechen sie in die naechste Zeile um wenn kein Platz mehr ist.

<div className="flex flex-wrap gap-2">
 {tags.map(tag => (
 <span key={tag} className="px-3 py-1 bg-gray-100 rounded-full">
 {tag}
 </span>
 ))}
</div>
Seite 2
Warum das funktioniert
  • Drei Konzepte reichen fuer 90 Prozent aller Layouts
  • Tailwind Flex-Klassen sind intuitiver als rohes CSS
  • Gap statt Margin eliminiert Spacing-Probleme
  • Flexbox ist in allen modernen Browsern perfekt unterstuetzt
Tipps
  • items-center ist die haeufigste Klasse nach flex
  • gap ersetzt margin zwischen Flex-Kindern komplett
  • flex-shrink-0 verhindert dass ein Element zusammengequetscht wird
  • Nutze order-Klassen um die visuelle Reihenfolge zu aendern
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen