CSS Flexbox Generator

Einstellungen

8px
3

Vorschau & CSS

 
   
 
 
   
 
 
 
Anleitung
 
     
  1. Richtung wählen — flex-direction bestimmt die Hauptachse: row (horizontal) oder column (vertikal).
    2.  
  2. Hauptachse ausrichten — justify-content verteilt Elemente entlang der Hauptachse.
    3.  
  3. Querachse ausrichten — align-items richtet Elemente senkrecht zur Hauptachse aus.
    4.  
  4. Umbruch steuern — flex-wrap erlaubt Elementen, in die nächste Zeile zu wechseln.
    5.  
  5. Abstand setzen — Den Gap-Schieberegler für den Abstand zwischen Elementen verwenden.
    6.  
  6. Anzahl anpassen — Elementanzahl ändern, um verschiedene Layouts zu previewen.
    7.  
 
 
 
Was ist CSS Flexbox?
 
Flexbox (Flexible Box Layout) ist ein CSS-Layout-Modell für eindimensionale Layouts — entweder eine Zeile oder eine Spalte. Es erleichtert die Ausrichtung und Verteilung von Elementen erheblich, auch wenn deren Größen dynamisch sind.
 
Flexbox eignet sich für Navigationsleisten, Kartenreihen, zentrierten Inhalt und alle Layouts, bei denen Elemente entlang einer Achse ausgerichtet werden müssen. Für zweidimensionale Raster ist CSS Grid meist besser geeignet.
 
 
 
Häufige Anwendungsfälle
 
 
Navigationsleisten
 
Zentrierte Hero-Bereiche
 
Kartenreihen
 
Formular-Layouts
 
Footer-Spalten
 
Schaltflächengruppen
 
 
Tipps & Best Practices
 
 
 gap statt margin verwenden 
gap fügt nur zwischen Elementen Abstand hinzu, nicht außen — sauberer als Abstände bei jedem Kind-Element.
 
 
 flex: 1 für gleiche Breiten 
flex: 1 auf Kind-Elemente anwenden, damit sie den verfügbaren Platz gleichmäßig aufteilen.
 
 
 min-width: 0 bei Kindern 
Flex-Elemente haben eine Mindestgröße basierend auf dem Inhalt. min-width: 0 ermöglicht Textkürzen und korrektes Overflow-Verhalten.
 
 
 Flexbox vs. Grid 
Flexbox ist ideal für eindimensionale Layouts. CSS Grid verwenden, wenn sowohl Zeilen als auch Spalten gleichzeitig gesteuert werden müssen.
 
 
 
Häufig gestellte Fragen
 
 
Was ist der Unterschied zwischen justify-content und align-items?
 
justify-content richtet Elemente entlang der Hauptachse aus (horizontal in einer Reihe, vertikal in einer Spalte). align-items richtet sie senkrecht dazu aus.
 
 
 
Wann sollte ich flex-wrap: wrap verwenden?
 
flex-wrap: wrap verwenden, wenn Elemente in eine neue Zeile wechseln sollen, wenn sie nicht in eine Reihe passen. Dies erzeugt responsive Layouts ohne Media Queries.
 
 
 
Wie zentriere ich ein Element mit Flexbox?
 
Den Container auf display: flex; justify-content: center; align-items: center; setzen, um Kindelemente in beiden Achsen zu zentrieren.
 
 
 
Was bewirkt flex-direction: column?
 
Es schaltet die Hauptachse auf vertikal um, sodass Elemente von oben nach unten gestapelt werden. justify-content steuert dann die vertikale Verteilung.