CSS3 Flexible Box (Flex Box)

Flexbox ist ein neuer Layoutmodus in CSS3.

CSS3 Flexible Box (Flexible Box oder Flexbox) ist ein Layoutmodus, der sicherstellt, dass sich Elemente angemessen verhalten, wenn die Seite sich an verschiedene Bildschirmgrößen und Gerätetypen anpassen muss.

Der Zweck der Einführung des Flexbox-Layoutmodells besteht darin, eine effizientere Möglichkeit zu bieten, leeren Raum zwischen untergeordneten Elementen innerhalb eines Containers anzuordnen, auszurichten und zu verteilen.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der die Eigenschaft unterstützt.

Das unmittelbar auf die Zahl folgende -webkit- oder -moz- ist das Präfix für den angegebenen Browser.

Eigenschaft
Grundlegende Unterstützung
(einzeilige Flexbox)		 29.0
21.0 -webkit-		 11.0 22.0
18.0 -moz-		 6.1 -webkit- 12.1 -webkit-
Mehrzeilige Flexbox 29.0
21.0 -webkit-		 11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1

CSS3-Flexbox-Inhalt

Flexbox besteht aus einem Flex-Container und Flex-Elementen.

Ein Flex-Container wird als Flex-Container definiert, indem die display-Eigenschaft auf flex oder inline-flex gesetzt wird.

Der Flex-Container enthält ein oder mehrere Flex-Elemente.

Hinweis:Alles außerhalb des Flex-Containers und innerhalb von Flex-Elementen wird normal gerendert. Flexbox definiert nur, wie Flex-Elemente innerhalb des Flex-Containers angeordnet werden.

Flex-Elemente werden normalerweise in einer Zeile innerhalb der Flexbox angezeigt. Standardmäßig hat jeder Container nur eine Zeile.

Die folgenden Elemente zeigen Flex-Elemente, die in einer Zeile von links nach rechts angezeigt werden:

Beispiel

<!DOCTYPE html> <html> <head> <style>
.flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; }
</style> </head> <body> <div class="flex-container"> <div class="flex-item">Flex-Element 1</div> <div class="flex-item">Flex-Element 2</div> <div class="flex-item">Flex-Element 3</div> </div> </body> </html>

Selbst ausprobieren »

Natürlich können wir die Anordnung ändern.

Wenn wirdirectionDie Eigenschaft istrtl(von rechts nach links) setzen, ändert sich auch die Anordnung der Flex-Elemente, und das Seitenlayout ändert sich entsprechend:

Beispiel

body { direction: rtl; } .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; }

Selbst ausprobieren »

flex-direction

flex-directionDie Eigenschaft legt die Position von Flex-Elementen innerhalb des übergeordneten Containers fest.

Syntax

flex-direction: row | row-reverse | column | column-reverse

flex-directionDie Werte sind:

  • row: Horizontal von links nach rechts angeordnet (linksbündig), die Standardanordnung.
  • row-reverse: Umgekehrte horizontale Anordnung (rechtsbündig, von hinten nach vorne, wobei das letzte Element zuerst platziert wird).
  • column: vertikale Anordnung.
  • column-reverse: Umgekehrte vertikale Anordnung, von hinten nach vorne, wobei das letzte Element oben platziert wird.

Das folgende Beispiel zeigtrow-reverseVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtcolumnVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtcolumn-reverseVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

justify-content-Eigenschaft

Die Eigenschaft justify-content wird auf den Flex-Container angewendet, um Flex-Elemente entlang der Hauptachse des Flex-Containers auszurichten.

Die Syntax für justify-content lautet wie folgt:

justify-content: flex-start | flex-end | center | space-between | space-around

Erklärung der einzelnen Werte:

  • flex-start：

    Flex-Elemente werden dicht zum Anfang der Zeile hin gepackt. Dies ist der Standardwert. Die main-start-Außenabstandskante des ersten Flex-Elements wird an die main-start-Kante der Zeile gesetzt, und nachfolgende Flex-Elemente werden in Reihenfolge bündig platziert.

  • flex-end：

    Flex-Elemente werden dicht zum Ende der Zeile hin gepackt. Die main-end-Außenabstandskante des ersten Flex-Elements wird an die main-end-Kante der Zeile gesetzt, und nachfolgende Flex-Elemente werden in Reihenfolge bündig platziert.

  • center：

    Flex-Elemente werden dicht zur Mitte hin gepackt. (Wenn der verbleibende freie Raum negativ ist, laufen die Flex-Elemente gleichmäßig in beide Richtungen über.)

  • space-between：

    Flex-Elemente werden gleichmäßig über die Linie verteilt. Wenn der verbleibende Raum negativ ist oder nur ein Flex-Element vorhanden ist, entspricht dieser Wert flex-start. Andernfalls wird der Außenabstand des ersten Flex-Elements an der main-start-Kante der Linie ausgerichtet, und der Außenabstand des letzten Flex-Elements wird an der main-end-Kante der Linie ausgerichtet; danach werden die übrigen Flex-Elemente mit gleichmäßigem Abstand zwischen benachbarten Elementen entlang der Linie verteilt.

  • space-around：

    Flex-Elemente werden gleichmäßig entlang der Linie verteilt, wobei auf beiden Seiten die Hälfte des Zwischenraums frei bleibt. Wenn der verbleibende Raum negativ ist oder nur ein Flex-Element vorhanden ist, entspricht dieser Wert center. Andernfalls werden die Flex-Elemente mit gleichmäßigem Abstand zwischen ihnen entlang der Linie verteilt (zum Beispiel 20px), während zwischen dem ersten und letzten Element und dem Flex-Container der halbe Abstand (1/2*20px=10px) frei bleibt.

Effektvorschau:

Das folgende Beispiel zeigtflex-endVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtcenterVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtspace-betweenVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtspace-aroundVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

align-items-Eigenschaft

align-itemsLegt die Ausrichtung von Flexbox-Elementen in Richtung der Querachse (vertikale Achse) fest oder ruft sie ab.

Syntax

align-items: flex-start | flex-end | center | baseline | stretch

Erklärung der einzelnen Werte:

  • flex-start: Die Grenze der Startposition des Flexbox-Elements auf der Querachse (vertikale Achse) liegt bündig an der Startkante der Querachse der Linie an.
  • flex-end: Die Grenze der Startposition des Flexbox-Elements auf der Querachse (vertikale Achse) liegt bündig an der Endkante der Querachse der Linie an.
  • center: Das Flexbox-Element wird auf der Querachse (vertikale Achse) der Linie zentriert. (Wenn die Größe der Linie kleiner als die Größe des Flexbox-Elements ist, läuft es in beide Richtungen gleichmäßig über.)
  • baseline: Wenn die Inline-Achse und die Querachse der Flexbox-Elemente identisch sind, ist dieser Wert gleichbedeutend mit 'flex-start'. In anderen Fällen nimmt dieser Wert an der Baseline-Ausrichtung teil.
  • stretch: Wenn der Wert der Eigenschaft, die die Querachsen-Größe angibt, 'auto' ist, wird die Margin-Box-Größe des Elements so nah wie möglich an die Größe der Linie angepasst, während weiterhin die Beschränkungen der Eigenschaften 'min/max-width/height' beachtet werden.

Das folgende Beispiel zeigtstretch(默认值)Verwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtflex-startVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtflex-endVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtcenterVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtbaselineVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; width: 400px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

flex-wrap-Eigenschaft

flex-wrapDie Eigenschaft wird verwendet, um das Umbruchverhalten der untergeordneten Elemente des Flex-Containers anzugeben.

Syntax

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

Erklärung der einzelnen Werte:

  • nowrap- Standard. Der Flex-Container ist einzeilig. In diesem Fall können Flex-Elemente den Container überlaufen.
  • wrap- Der Flex-Container ist mehrzeilig. In diesem Fall werden die überlaufenden Teile von Flex-Elementen in neue Zeilen gesetzt, und Zeilenumbrüche treten innerhalb der Elemente auf.
  • wrap-reverse- Umgekehrte Umbruchanordnung.

Das folgende Beispiel zeigtnowrapVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; width: 300px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtwrapVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 300px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

Das folgende Beispiel zeigtwrap-reverseVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; width: 300px; height: 250px; background-color: lightgrey; }

Selbst ausprobieren »

align-content-Eigenschaft

align-contentDie Eigenschaft wird verwendet zum Ändern flex-wrapdes Verhaltens der Eigenschaft. Ähnlich wiealign-items, aber es legt nicht die Ausrichtung von Flex-Elementen fest; vielmehr legt es die Ausrichtung jeder Zeile fest.

Syntax

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Erklärung der einzelnen Werte:

  • stretch- Standard. Jede Zeile wird gestreckt, um den verbleibenden Platz einzunehmen.
  • flex-start- Zeilen werden zur Startposition des Flex-Containers hin gestapelt.
  • flex-end- Zeilen werden zur Endposition des Flex-Containers hin gestapelt.
  • center- Zeilen werden zur Mittelposition des Flex-Containers hin gestapelt.
  • space-between- Zeilen werden gleichmäßig im Flex-Container verteilt.
  • space-around- Zeilen werden gleichmäßig im Flex-Container verteilt, wobei an beiden Enden die halbe Größe des Abstands zwischen den Kindelementen beibehalten wird.

Das folgende Beispiel zeigtcenterVerwendung:

Beispiel

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; width: 300px; height: 300px; background-color: lightgrey; }

Selbst ausprobieren »

Eigenschaften von Flex-Kindelementen

Sortierung

Syntax

order:

Erklärung der einzelnen Werte:

  • <integer>: Ein ganzzahliger Wert wird verwendet, um die Reihenfolge festzulegen, wobei kleinere Werte zuerst platziert werden. Negative Werte sind zulässig.

orderDie Eigenschaft legt die Attribute von Flex-Elementen innerhalb des Flex-Containers fest:

Beispiel

.flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } .first { -webkit-order: -1; order: -1; }

Selbst ausprobieren »

align

Wird der Wert "margin" auf "auto" gesetzt, wird automatisch der verbleibende Platz im Flex-Container eingenommen. Daher können Flex-Elemente durch das Setzen des vertikalen margin-Werts auf "auto" in beiden Achsenrichtungen des Flex-Containers vollständig zentriert werden.

Das folgende Beispiel legt für das erste Flex-Element fest:margin-right: auto;. Dadurch wird der verbleibende Platz auf der rechten Seite des Elements platziert:

Beispiel

.flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: 10px; } .flex-item:first-child { margin-right: auto; }

Selbst ausprobieren »

Perfekte Zentrierung

Das folgende Beispiel löst perfekt das Zentrierungsproblem, auf das wir normalerweise stoßen.

Mit Flexbox wird das Zentrieren sehr einfach; Sie müssen nurmargin: auto;Es kann Flex-Elemente in beiden Achsenrichtungen vollständig zentrieren:

Beispiel

.flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: auto; }

Selbst ausprobieren »

align-self

align-selfDie Eigenschaft wird verwendet, um die Ausrichtung des Flex-Elements selbst in Richtung der Querachse (vertikale Achse) festzulegen.

Syntax

align-self: auto | flex-start | flex-end | center | baseline | stretch

Erklärung der einzelnen Werte:

  • auto: Wenn der Wert von 'align-self' 'auto' ist, ist sein berechneter Wert der Wert von 'align-items' des übergeordneten Elements. Wenn es kein übergeordnetes Element hat, ist der berechnete Wert 'stretch'.
  • flex-start: Die Grenze der Startposition des Flexbox-Elements auf der Querachse (vertikale Achse) liegt bündig an der Startkante der Querachse der Linie an.
  • flex-end: Die Grenze der Startposition des Flexbox-Elements auf der Querachse (vertikale Achse) liegt bündig an der Endkante der Querachse der Linie an.
  • center: Das Flexbox-Element wird auf der Querachse (vertikale Achse) der Linie zentriert. (Wenn die Größe der Linie kleiner als die Größe des Flexbox-Elements ist, läuft es in beide Richtungen gleichmäßig über.)
  • baseline: Wenn die Inline-Achse und die Querachse der Flexbox-Elemente identisch sind, ist dieser Wert gleichbedeutend mit 'flex-start'. In anderen Fällen nimmt dieser Wert an der Baseline-Ausrichtung teil.
  • stretch: Wenn der Wert der Eigenschaft, die die Querachsen-Größe angibt, 'auto' ist, wird die Margin-Box-Größe des Elements so nah wie möglich an die Größe der Linie angepasst, während weiterhin die Beschränkungen der Eigenschaften 'min/max-width/height' beachtet werden.

Das folgende Beispiel zeigt die Auswirkungen verschiedener auf Flex-Elemente angewendeter align-self-Werte:

Beispiel

.flex-item { background-color: cornflowerblue; width: 60px; min-height: 100px; margin: 10px; } .item1 { -webkit-align-self: flex-start; align-self: flex-start; } .item2 { -webkit-align-self: flex-end; align-self: flex-end; } .item3 { -webkit-align-self: center; align-self: center; } .item4 { -webkit-align-self: baseline; align-self: baseline; } .item5 { -webkit-align-self: stretch; align-self: stretch; }

Selbst ausprobieren »

flex

flexDie Eigenschaft wird verwendet, um anzugeben, wie Flex-Elemente den Platz zuweisen.

Syntax

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

Erklärung der einzelnen Werte:

  • auto: berechneter Wert ist 1 1 auto
  • initial: berechneter Wert ist 0 1 auto
  • none: berechneter Wert ist 0 0 auto
  • inherit: erbt vom Elternelement
  • [ flex-grow ]: Definiert das Vergrößerungsverhältnis eines Flexbox-Elements.
  • [ flex-shrink ]: Definiert das Schrumpfungsverhältnis eines Flexbox-Elements.
  • [ flex-basis ]: Definiert den Standard-Basiswert eines Flexbox-Elements.

Im folgenden Beispiel belegt das erste Flex-Element 2/4 des Platzes und die beiden anderen belegen jeweils 1/4 des Platzes:

Beispiel

.flex-item { background-color: cornflowerblue; margin: 10px; } .item1 { -webkit-flex: 2; flex: 2; } .item2 { -webkit-flex: 1; flex: 1; } .item3 { -webkit-flex: 1; flex: 1; }

Selbst ausprobieren »
实例

Weitere Beispiele

Mit Flexbox responsive Seiten erstellen

CSS3-Flexbox-Eigenschaften

Die folgende Tabelle listet die in Flexbox häufig verwendeten Eigenschaften auf:

Eigenschaft Beschreibung
display Gibt den Box-Typ des HTML-Elements an.
flex-direction Gibt die Anordnung der Kindelemente innerhalb des Flex-Containers an.
justify-content Legt die Ausrichtung von Flexbox-Elementen in Richtung der Hauptachse (horizontale Achse) fest.
align-items Legt die Ausrichtung von Flexbox-Elementen in Richtung der Querachse (vertikale Achse) fest.
flex-wrap Legt fest, ob die Kindelemente des Flex-Containers umbrechen, wenn sie den übergeordneten Container überschreiten.
align-content Ändert das Verhalten der flex-wrap-Eigenschaft, ähnlich wie align-items, legt aber anstelle der Ausrichtung der Kindelemente die Zeilenausrichtung fest.
flex-flow Kurzschreibweise für flex-direction und flex-wrap.
order Legt die Anordnungsreihenfolge der Kindelemente des Flex-Containers fest.
align-self Wird auf Flex-Elemente angewendet. Überschreibt die align-items-Eigenschaft des Containers.
flex Legt fest, wie die Kindelemente des Flex-Containers den Platz aufteilen.
Weitere Erweiterungen