So verwenden Sie es
- Tippen Sie einen Klassenname für den Container ein, etwa werkzeugleiste. Das CSS verwendet ihn als Klassenselektor.
- Wählen Sie flex-direction, flex-wrap und die Ausrichtungswerte. Jeder zeigt zuerst seinen Anfangswert.
- Stellen Sie die Anzahl der Elemente (1 bis 12) ein und danach flex-grow, flex-shrink und flex-basis jedes Elements.
- Prüfen Sie die Vorschau, kopieren Sie danach das CSS in Ihr Stylesheet und setzen Sie die Klasse auf den Container.
Die Eigenschaften des Containers
Das CSS Flexible Box Layout Module ordnet die Kinder eines Flex-Containers entlang einer Hauptachse an. flex-direction wählt die Achse, und flex-wrap legt fest, ob die Kinder in eine neue Zeile umbrechen dürfen. justify-content verteilt die Kinder entlang der Hauptachse, align-items und align-content platzieren sie quer dazu.
- flex-direction beginnt mit row und akzeptiert row, row-reverse, column oder column-reverse.
- flex-wrap beginnt mit nowrap und akzeptiert zusätzlich wrap oder wrap-reverse.
- justify-content beginnt mit flex-start, align-items und align-content beginnen mit stretch.
Die Eigenschaften der Elemente
Jedes Kind des Containers ist ein Element, und seine drei Flex-Eigenschaften bestimmen, wie viel Platz es bekommt. flex-grow beginnt mit 0 und verteilt den freien Platz im Verhältnis des Faktors. flex-shrink beginnt mit 1 und legt fest, wie viel ein Element abgibt, wenn zu wenig Platz vorhanden ist. flex-basis beginnt mit auto, dabei gilt die Größe, die das Element ohnehin hat; eine Länge oder ein Prozentwert legt zuerst eine Größe fest.
flex: flex-grow flex-shrink flex-basis; der Anfangswert ist 0 1 autoWas das Werkzeug nicht schreibt
- Die Eigenschaften order, align-self und gap, die Sie von Hand im Container oder bei einem Element ergänzen können.
- Elemente über das zwölfte hinaus: Das Werkzeug endet bei 12 Elementen, eine längere Liste braucht ihre Regeln von Hand.
Beispiel: eine Werkzeugleiste mit Umbruch und drei Elementen
Der Klassenname ist werkzeugleiste, flex-wrap ist wrap, justify-content ist space-between und align-items ist center. Das erste Element behält die Anfangswerte, deshalb hat es keine Regel. Das zweite wächst, um den freien Platz zu füllen, mit einer Basis von 0. Das dritte behält seine Größe, mit einer Basis von 200px. Das Werkzeug schreibt nur für das zweite und das dritte Element eine Regel.
| Element | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
Häufig gestellte Fragen
Worin unterscheiden sich flex-grow und flex-basis?
flex-basis ist die Größe, von der ein Element startet, bevor der freie Platz verteilt wird. flex-grow legt dann fest, wie der Restplatz verteilt wird, im Verhältnis des Faktors jedes Elements. Ein Element mit Basis 0 und Grow 1 nimmt den Platz, den die anderen übrig lassen.
Warum hat das erste Element im Beispiel keine Regel?
Seine Werte sind die Anfangswerte der Eigenschaften: flex-grow 0, flex-shrink 1 und flex-basis auto. Der Browser verwendet diese Werte ohne Regel, deshalb schreibt das Werkzeug nur für ein Element eine Regel, das davon abweicht.
Warum beginnt align-items mit stretch?
Das CSS Flexible Box Layout Module legt für align-items den Anfangswert stretch fest. Die Elemente füllen dann die Querachse, solange Sie keinen anderen Wert wählen. Das Werkzeug beginnt mit demselben Wert, sodass das CSS dem entspricht, was ein Browser ohne Deklaration tut.
Warum akzeptiert die Basis nur px, rem, em und Prozent?
Das sind die Einheiten, die das Werkzeug prüft. Eine Basis von auto oder die Zahl 0 ohne Einheit wird ebenfalls akzeptiert. Andere Einheiten wie vw werden hier nicht angeboten; schreiben Sie sie von Hand, wenn Ihr Layout sie braucht.
Kann ich einen Abstand zwischen die Elemente setzen?
Mit diesem Werkzeug nicht. Es schreibt die fünf Eigenschaften des Containers und die Flex-Werte der Elemente. Ergänzen Sie gap von Hand in der Regel des Containers, nachdem Sie das CSS kopiert haben.
Wird das CSS, das ich erstelle, irgendwohin gesendet?
Nein. Die Vorschau und das CSS entstehen in Ihrem Browser. Nichts wird gespeichert oder an unseren Server gesendet, deshalb kopieren Sie das CSS, bevor Sie die Seite verlassen.
Quellen
Zahlen und Text zuletzt geprüft: Donnerstag, 12. November 2026.