Mit Flexbox (CSS Flexible Box Layout) können Sie Elemente flexibel in einem Container, auch Flex-Container genannt, anordnen. Die Elemente innerhalb des Containers (die sogenannten Flex-Elemente) können vergrößert oder verkleinert werden, um den Platz im Container optimal zu nutzen, wobei die festgelegte Reihenfolge und der Abstand eingehalten werden. Flexbox ist für Sie möglicherweise besonders nützlich, wenn Sie Elemente unterschiedlicher Größe in Zeilen oder Spalten ausrichten möchten, wobei größere Elemente mehr Platz als kleinere benötigen.
Flexbox-Einstellungen
Die Flexbox-Einstellungen finden Sie im Steuerfeld „Responsiv“ auf dem Tab Flexbox.
Flexbox verwenden
Klicken Sie das Kästchen Flexbox verwenden an, um Flexbox zu verwenden. Das aktuelle übergeordnete Element wird zum Flex-Container und die Flexbox-Eigenschaften sind im Steuerfeld „Responsiv“ verfügbar.
Flexbox ist in folgenden Fällen nicht verfügbar:
- Das aktuelle übergeordnete Element ist ein Textelement wie
<p>oder<h1>. - Das aktuelle übergeordnete Element enthält Inline-Elemente wie
<span>oder<a>. Das gilt nicht, wenn das übergeordnete Element eine Seite ist.
Alle direkten untergeordneten Elemente des Flex-Containers werden zu Flex-Elementen. (Anleitungsebenen sind ausgeschlossen.) Die Flex-Elemente sind entlang einer Hauptachse angeordnet, die entweder horizontal oder vertikal sein kann. Sie können auch die Richtung festlegen, in die Inhalte entlang der Achse fließen. Weil die Ausrichtung und Richtung der Flexbox veränderbar sind, werden Eigenschaften auf Werte wie „flex-start“ und „flex-end“ festgelegt, nicht auf „top“, „bottom“, „left“ oder „right“.
Richtung
Die Richtung bestimmt die Anordnung der Flex-Elemente, indem die Hauptachse und die Flussrichtung entlang der Achse festgelegt werden.
| Richtung | Verhalten | Hauptachse |
|---|---|---|
| row | Die Flex-Elemente sind in Zeilen in Richtung des Textflusses angeordnet (links beginnend für rechtsläufige Sprachen wie Deutsch). |
Horizontal |
| row-reverse | Die Flex-Elemente sind in Zeilen entgegengesetzt zur Richtung des Textflusses angeordnet (rechts beginnend für rechtsläufige Sprachen wie Deutsch). |
Horizontal |
| column | Die Flex-Elemente sind in Spalten in Richtung des Inhaltsflusses angeordnet (normalerweise oben beginnend). |
Vertikal |
| column-reverse | Die Flex-Elemente sind in Spalten entgegengesetzt zur Richtung des Inhaltsflusses angeordnet (normalerweise unten beginnend). |
Vertikal |
Abstand
Mit dem Abstand wird festgelegt, ob Flex-Elemente automatisch in bestimmten Abständen oder mit fixierten Abständen angeordnet werden.
| Abstand | Verhalten |
|---|---|
| Standard | Die Flex-Elemente werden im Flex-Container gemäß den angegebenen Einstellungen für Ausrichtung und Umbruch automatisch angeordnet. |
| Fixiert | Die Flex-Elemente werden entsprechend dem angegebenen untergeordneten Abstand und Randabstand angeordnet. |
Ausrichtung
Die Ausrichtung bestimmt, wie Flex-Elemente entlang der Hauptachse angeordnet werden. Diese Einstellung ist bei Verwendung des Standardabstands verfügbar.
| Ausrichtung | Verhalten |
|---|---|
| flex-start | Die Flex-Elemente werden ohne Abstand am Startrand der Zeile oder Spalte beginnend platziert. |
| flex-end | Die Flex-Elemente werden ohne Abstand am Endrand der Zeile oder Spalte beginnend platziert. |
| center | Die Flex-Elemente sind auf der Hauptachse zentriert. |
| space-between | Die Flex-Elemente sind gleichmäßig entlang der Hauptachse verteilt, wobei das Start- und das Endelement am Rand des Containers platziert sind. |
| space-around | Die Flex-Elemente sind gleichmäßig entlang der Hauptachse verteilt, mit halbem Abstand an Anfang und Ende. |
| space-evenly | Die Flex-Elemente sind gleichmäßig entlang der Hauptachse verteilt, mit demselben Abstand an Anfang und Ende sowie zwischen den Elementen. |
Querachsenausrichtung
Die Querachsenausrichtung gibt an, wie Flex-Elemente entlang der Querachse der aktuellen Zeile oder Spalte angeordnet werden.
| Querachsenausrichtung | Verhalten |
|---|---|
| flex-start | Die Flex-Elemente werden am Startrand der Querachse platziert. |
| flex-end | Die Flex-Elemente werden am Endrand der Querachse platziert. |
| center | Die Flex-Elemente sind auf der Querachse zentriert. |
| stretch | Die Flex-Elemente werden so gestreckt, dass der verfügbare Platz entlang der Querachse ausgefüllt wird. |
| baseline | Die Flex-Elemente werden entlang der Querachse platziert, sodass ihre Baselines ausgerichtet sind. |
Umbruch
Mit dem Umbruch wird bestimmt, ob der Content im Container umgebrochen wird. Diese Einstellung ist bei Verwendung des Standardabstands verfügbar.
| Umbruch | Verhalten |
|---|---|
| nowrap | Die Flex-Elemente sind in einer einzigen Zeile oder Spalte angeordnet. |
| wrap | Die Flex-Elemente können auf mehrere Zeilen oder Spalten umgebrochen werden, wenn sie zu groß für eine einzige Zeile bzw. Spalte sind. |
| wrap-reverse | Die Flex-Elemente können auf mehrere Zeilen oder Spalten umgebrochen werden, wenn sie zu groß für eine einzige Zeile bzw. Spalte sind. Die Richtung der Querachse ist dabei umgekehrt. |
Umbruchausrichtung
Mit der Umbruchausrichtung wird festgelegt, wie Zeilen oder Spalten entlang der Querachse angeordnet werden (die senkrecht zur Hauptachse verläuft), wenn der Flex-Container mehrere Zeilen oder Spalten enthält. Diese Einstellung ist verfügbar, wenn der Standardabstand und der Standardumbruch aktiviert sind.
| Umbruchausrichtung | Verhalten |
|---|---|
| flex-start | Die Zeilen oder Spalten werden ohne Abstand am Startrand des Containers platziert. |
| flex-end | Die Zeilen oder Spalten werden ohne Abstand am Endrand des Containers platziert. |
| center | Die Zeilen oder Spalten sind auf der Querachse zentriert. |
| stretch | Die Zeilen oder Spalten werden, sofern für sie keine Höhe festgelegt ist, so gestreckt, dass der verfügbare Platz entlang der Querachse ausgefüllt wird. |
| space-between | Die Zeilen oder Spalten sind in gleichmäßigen Abständen entlang der Querachse angeordnet. Die Start- und Endzeilen bzw. -spalten berühren dabei den Rand des Containers. |
| space-around | Die Zeilen oder Spalten sind in gleichmäßigen Abständen entlang der Querachse angeordnet, mit halbem Abstand an Anfang und Ende. |
Untergeordneter Abstand
Der Abstand in Pixeln zwischen zwei Elementen im Flex-Container. Diese Einstellung ist bei Verwendung eines fixierten Abstands verfügbar.
Randabstand
Der Abstand in Pixeln zwischen den äußeren Elementen und dem Rand des Flex-Containers. Diese Einstellung ist bei Verwendung eines fixierten Abstands verfügbar.
Reihenfolge untergeordneter Elemente
Die im Flexbox-Container enthaltenen Elemente sind hier aufgeführt. Um sie neu anzuordnen, ziehen Sie die Elemente an die gewünschte Position in der Liste.
Sie können auch Flex-Elemente im Anzeigebereich verschieben, um sie neu anzuordnen.
Untergeordnete Flexbox-Eigenschaften
Die Flex-Elemente haben ihre eigenen Eigenschaften. Wählen Sie das untergeordnete Element aus, um seine Flexbox-Einstellungen aufzurufen und zu bearbeiten.
Obwohl Flex-Elemente größer oder kleiner werden können, berücksichtigen sie die minimale und maximale Breite und Höhe. Die Eigenschaften „Links“ und „Oben“ sind für sie deaktiviert, da Flex-Elemente gemäß den Flexbox-Einstellungen angeordnet werden, aber Sie können die Verschiebungseigenschaften verwenden, um ihre Positionen zu ändern.
Querachsenausrichtung
Die Querachsenausrichtung eines Flex-Elements überschreibt die für den Container festgelegte standardmäßige Querachsenausrichtung.
| Querachsenausrichtung | Verhalten |
|---|---|
| auto | Für das Flex-Element wird die Einstellung für die Querachsenausrichtung des Flex-Containers verwendet. |
| baseline | Die Baseline des Flex-Elements ist an den Baselines anderer Flex-Elemente mit Baseline-Ausrichtung ausgerichtet. |
| center | Das Flex-Element wird in der Mitte der Querachse positioniert. |
| flex-end | Das Flex-Element wird entlang der Querachse am Endrand des Containers positioniert. |
| flex-start | Das Flex-Element wird entlang der Querachse am Startrand des Containers positioniert. |
| stretch | Das Flex-Element wird so gestreckt, dass es den Container entlang der Querachse ausfüllt, sofern es keine definierte Höhe hat. |
Vergrößerungsrate
Der Faktor für die Vergrößerungsrate bestimmt, wie viel das Flex-Element vergrößert wird, um den verfügbaren Platz im Flex-Container entlang der Hauptachse zu füllen. Der Faktor wird proportional zu den Faktoren für die Vergrößerungsrate anderer Elemente in derselben Zeile oder Spalte berechnet. Diese Einstellung ist bei Verwendung des Standardabstands verfügbar.
Wenn eine Zeile beispielsweise drei Flex-Elemente mit den Vergrößerungsraten 1, 1 und 2 enthält, belegt das letzte Flex-Element doppelt so viel des verfügbaren Platzes in der Zeile wie jedes der anderen Flex-Elemente.
Wenn die Summe aller Vergrößerungsraten für die Elemente in einer Zeile oder Spalte kleiner als 1 ist, nutzen die Flex-Elemente möglicherweise nicht den gesamten verfügbaren Platz.
Wenn die Vergrößerungsrate 0 ist, wird das Flex-Element nicht vergrößert.
Verkleinerungsrate
Mit dem Faktor für die Verkleinerungsrate wird festgelegt, um wie viel das Flex-Element verkleinert wird, um in den Flex-Container entlang der Hauptachse zu passen. Der Faktor wird proportional zu den Faktoren für die Verkleinerungsrate anderer Elemente in derselben Zeile oder Spalte berechnet. Diese Einstellung ist bei Verwendung des Standardabstands verfügbar.
Wenn eine Zeile beispielsweise drei Flex-Elemente mit den Verkleinerungsraten 1, 1 und 2 enthält, wird das letzte Flex-Element relativ zu den anderen Flex-Elementen stärker verkleinert. Die Verkleinerungsraten berücksichtigen die Größe des Flex-Elements.
Wenn die Verkleinerungsrate 0 ist, wird das Flex-Element nicht verkleinert.