CSS Flexbox Generator
Erstelle Flexbox-Layouts visuell und exportiere den fertigen CSS-Code.
Container-Eigenschaften
Anzahl Elemente
3
Element-Eigenschaften
Live-Vorschau
1
2
3
Generierter CSS-Code
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
gap: 8px;
}
.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
}
.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
}
.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
}Über CSS Flexbox
Vorteile von Flexbox
- • Einfache vertikale und horizontale Zentrierung
- • Flexible Grössenanpassung ohne Media Queries
- • Reihenfolge der Elemente per CSS änderbar
- • Breite Browser-Unterstützung
Tipp
Klicke auf ein Element in der Vorschau, um dessen individuelle Eigenschaften im linken Panel zu bearbeiten. So kannst du jeden Flexbox-Item individuell anpassen.
Häufig gestellte Fragen
Werbefläche 1
Werbefläche 2
Werbefläche 3
Werbefläche 4
Werbefläche 5
Werbefläche 6
Werbefläche 7
Werbefläche 8
Interesse an einer Werbefläche? Werbung buchen