Perfekte Flexbox-Layouts erstellen

Visualisieren, anpassen und generieren Sie CSS-Flexbox-Code mit unserer intuitiven Drag-and-Drop-Oberfläche.

Container-Eigenschaften

Artikeleigenschaften Ausgewähltes

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Generierter CSS-Code

Beliebte Flexbox-Voreinstellungen

Horizontal und vertikal zentrieren

Content

Perfekt zum Zentrieren eines Logos, einer Schaltfläche oder eines beliebigen Elements sowohl horizontal als auch vertikal.

Gleicher Abstand

Item 1
Item 2
Item 3

Erstellen Sie einen gleichen Abstand zwischen Elementen mit Abstand zwischen oder Abstand.

Vertikales Menü

Home
About
Contact

Erstellen Sie ein vertikales Navigationsmenü mit konsistenten Abständen und Ausrichtungen.

Responsives Raster

Box 1
Box 2
Box 3
Box 4
Box 5

Erstellen Sie ein responsives Rasterlayout, das Elemente basierend auf dem verfügbaren Platz umbricht.

Heldenbanner

Haupttitel

Heldenbereich mit Call-to-Action

Gestalten Sie ein Heldenbanner mit Titel, Untertitel und einem Call-to-Action-Button.

für das Fußzeilenlayout

Company

About Us

Careers

Support

Hilfecenter

Kontakt

© 2023 Flexbox Generator

Erstellen Sie eine responsive Fußzeile mit Spalten, die auf kleineren Bildschirmen gestapelt werden können.

Beispiele

Navigationsleiste

Logo
Home
Products
About
Contact

Ein gängiges Layout der Navigationsleiste mit einem Logo auf der linken Seite, Menüelementen in der Mitte und einem Warenkorbsymbol auf der rechten Seite.

Card Grid

Titl ladene

Kartenbeschreibungstext hier

Kartentitel

Kartenbeschreibungstext hier

Kartentitelkartenbeschreibungstext

hier

Ein responsives Kartenraster, das sich mithilfe der Flexbox-Eigenschaften an verschiedene Bildschirmgrößen anpasst.

Artikellayout

Artikeltitel

Veröffentlicht am 1. Januar 2023 · 5 min Lesezeit

Artikelinhalt hier. Dabei kann es sich um eine kurze Zusammenfassung oder den vollständigen Artikeltext handeln. Flexbox hilft dabei, das Bild und den Text auf visuell ansprechende Weise auszurichten.

Ein gängiges Artikellayout mit einem Bild auf der linken Seite und Textinhalten auf der rechten Seite, das auf Mobilgeräten gestapelt wird.

Dashboard-Layout

Header
Sidebar
Hauptinhalt
Footer

Ein Dashboard-Layout mit Kopfzeile, Seitenleiste, Hauptinhaltsbereich und Fußzeile, die Flexbox für die horizontale und vertikale Ausrichtung verwendet.

Flexbox Grundlagen

Was ist Flexbox?

Flexible Box Layout, allgemein bekannt als Flexbox, ist ein CSS3-Layoutmodell, das eine effiziente Möglichkeit bietet, den Platz zwischen Elementen in einem Container zu verteilen und auszurichten, selbst wenn ihre Größe unbekannt oder dynamisch ist.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Schlüsselkonzepte:Flexbox stellt zwei Hauptkonzepte vor: dieFlex Container and the Flex-Container-Flex-Elemente. Der Container ist das übergeordnete Element, und die Elemente sind seine direkten untergeordneten Elemente.

"Hauptachse" vs. "Querachse

basieren auf zwei Achsen: dermain axis and the Querachse.

  • Hauptachse:entlang der Flex-Elemente angeordnet werden. Definiert durchflex-direction.
  • Querachse:Die Achse senkrecht zur Hauptachse. Seine Richtung hängt von der Richtung der Hauptachse ab.
Main Axis →
← Cross Axis Container
Start
Main
End

Properties

Property Description
display Definiert einen Flex-Container; inline oder Block, abhängig vom angegebenen Wert.
flex-direction Legt die Hauptachse fest und definiert somit die Richtung, in der Flex-Elemente im Flex-Container platziert werden.
flex-wrap Standardmäßig versuchen alle Flex-Elemente, in eine Zeile zu passen. Mit dieser Eigenschaft können Sie dies ändern und zulassen, dass die Elemente nach Bedarf umbrochen werden.
justify-content Richtet Flex-Elemente entlang der Hauptachse der aktuellen Zeile des Flex-Containers aus.
align-items Richtet Flex-Elemente entlang der Querachse der aktuellen Linie des Flex-Containers aus.
align-content Richtet die Linien eines Flex-Containers aus, wenn in der Querachse zusätzlicher Platz vorhanden ist.

Artikeleigenschaften

Property Description
order Standardmäßig werden Flex-Elemente in der Quellreihenfolge angeordnet. DieorderEigenschaft steuert jedoch die Reihenfolge, in der sie im Flex-Container angezeigt werden.
flex-grow Definiert die Möglichkeit, dass ein Flex-Element bei Bedarf vergrößert werden kann. Es greift zupts Ein einheitenloser Wert, der als Anteil dient.
flex-shrink Definiert die Möglichkeit, dass ein Flex-Element bei Bedarf verkleinert werden kann.
flex-basis Definiert die Anfangsgröße eines Flex-Artikels, bevor der verfügbare Platz entsprechend den Flex-Faktoren verteilt wird.
align-self der Standardachse (oder der angegebenen Achsealign-items) für einzelne Flex-Elemente.

Related Tools

CSS3-Transformationen mühelos erstellen

Ein leistungsstarkes, intuitives Tool zum Erstellen komplexer CSS3-Transformationen, ohne Code schreiben zu müssen. Visualisieren Sie Änderungen in Echtzeit und kopieren Sie das generierte CSS, um es in Ihren Projekten zu verwenden.

CSS3-Übergangsgenerator

Reibungsloser Übergang

Stylus-zu-CSS-Konverter

Schnell, einfach und sicher.

Prozentrechner

Berechnen Sie ganz einfach Prozentsätze mit unserem intuitiven Prozentrechner.

JSON-Viewer

Große JSON-Dateien mit Leichtigkeit anzeigen - blitzschnell und reibungslos

MD2-Hash-Generator

Generieren Sie mit diesem Online-Tool schnell und einfach MD2-Hashes. Sichere, zuverlässige und sofortige Ergebnisse.