CSS Flexbox

1
2
3
4
5
6
7
8

Versuchen Sie es selbst

CSS Flexbox-Layout-Modul

Vor dem Erscheinen des Flexbox-Layout-Moduls waren die folgenden vier Layout-Modelle verfügbar:

  • Block (Block), um Teile der Webseite (Abschnitte) zu verwenden
  • Inline (Inline), um Text zu verwenden
  • Tabelle, um Daten in zwei Dimensionen darzustellen
  • Position, um die klare Position der Elemente zu bestimmen

Der Flexbox-Layout-Modul ermöglicht eine einfachere Gestaltung flexibler, responsiver Layout-Strukturen, ohne Floats oder Positioning zu verwenden.

Browser-Unterstützung

Wird von allen modernen Browsern unterstützt flexbox Eigenschaften.

29.0 11.0 22.0 10 48

Flexbox-Elemente

Um mit dem Flexbox-Modell zu beginnen, müssen Sie zunächst einen Flex-Container definieren.

1
2
3

Die obigen Elemente stellen einen Flex-Behälter mit drei Flex-Elementen (blauer Bereich) dar.

Beispiel

enthält einen Flex-Behälter mit drei Flex-Elementen:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Versuchen Sie es selbst

Elternelements (Behälters)

durch Setzen des display Die Eigenschaft wird auf flexDer Flex-Behälter wird verstellbar sein:

1
2
3

Beispiel

.flex-container {
  display: flex;
}

Versuchen Sie es selbst

Hier sind die Eigenschaften des Flex-Behälters:

flex-direction Eigenschaft

flex-direction Die Eigenschaft definiert, in welche Richtung der Behälter die Flex-Elemente stapeln soll.

1
2
3

Beispiel

column Der Wert stellt vertikale Stapelung von Flex-Elementen (von oben nach unten) ein:

.flex-container {
  display: flex;
  flex-direction: column;
}

Versuchen Sie es selbst

Beispiel

column-reverse Der Wert stapelt Flex-Elemente vertikal (aber von unten nach oben):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Versuchen Sie es selbst

Beispiel

row Der Wert stapelt Flex-Elemente horizontal (von links nach rechts):

.flex-container {
  display: flex;
  flex-direction: row;
}

Versuchen Sie es selbst

Beispiel

row-reverse Der Wert stapelt Flex-Elemente horizontal (aber von rechts nach links):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Versuchen Sie es selbst

flex-wrap Eigenschaft

flex-wrap Die Eigenschaft legt fest, ob Flex-Elemente umgebrochen werden sollten.

Das folgende Beispiel enthält 12 Flex-Elemente, um die Eigenschaft flex-wrap besser zu demonstrieren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Beispiel

wrap Der Wert legt fest, dass die Flex-Elemente bei Bedarf umgebrochen werden:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Versuchen Sie es selbst

Beispiel

nowrap Der Wert legt fest, dass die Flex-Elemente nicht umgebrochen werden (Standard):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Versuchen Sie es selbst

Beispiel

wrap-reverse Der Wert legt fest, dass die Flex-Elemente bei Bedarf in umgekehrter Reihenfolge umgebrochen werden:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Versuchen Sie es selbst

flex-flow Eigenschaft

flex-flow Die Eigenschaft ist eine Abkürzung zur gleichzeitigen Einstellung der Eigenschaften flex-direction und flex-wrap.

Beispiel

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Versuchen Sie es selbst

justify-content Eigenschaft

justify-content Die Eigenschaft wird verwendet, um Flex-Elemente auszurichten:

1
2
3

Beispiel

center Der Wert übereinstimmt mit dem flexiblen Element im Zentrum des Behälters ausgerichtet:

.flex-container {
  display: flex;
  justify-content: center;
}

Versuchen Sie es selbst

Beispiel

flex-start Der Wert übereinstimmt mit dem flexiblen Element am Anfang des Behälters ausgerichtet (Standard):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Versuchen Sie es selbst

Beispiel

flex-end Der Wert übereinstimmt mit dem flexiblen Element am Ende des Behälters ausgerichtet:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Versuchen Sie es selbst

Beispiel

space-around Der Wert zeigt Flex-Elemente an, die vor, zwischen und nach den Zeilen mit Leerzeichen haben:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Versuchen Sie es selbst

Beispiel

space-between Der Wert zeigt Flex-Elemente an, die zwischen den Zeilen Leerzeichen haben:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Versuchen Sie es selbst

align-items Eigenschaft

align-items Die Eigenschaft wird verwendet, um Flex-Elemente vertikal auszurichten.

1
2
3

In diesen Beispielen verwenden wir Behälter mit einer Höhe von 200 Pixeln, um die Eigenschaft align-items besser zu demonstrieren.

Beispiel

center Der Wert ausrichtet die Flex-Elemente in der Mitte des Behälters aus:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Versuchen Sie es selbst

Beispiel

flex-start Der Wert ausrichtet die Flex-Elemente am oberen Ende des Behälters aus:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Versuchen Sie es selbst

Beispiel

flex-end Der Wert ausrichtet die Flex-Elemente am unteren Ende des Behälters aus:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Versuchen Sie es selbst

Beispiel

stretch Der Wert dehnt die Flex-Elemente aus, um den Behälter auszufüllen (Standard):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Versuchen Sie es selbst

Beispiel

baseline Der Wert macht die Flex-Linien basierend auf der Baseline ausgerichtet:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Versuchen Sie es selbst

Hinweis:Dieses Beispiel verwendet verschiedene font-size-Werte, um zu zeigen, dass die Elemente nach dem Text-Basisline ausgerichtet sind:

1
2
3
4

align-content Eigenschaft

align-content Diese Eigenschaft wird verwendet, um die Flex-Linien auszurichten.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

In diesen Beispielen verwenden wir einen Behälter mit einer Höhe von 600 Pixeln und setzen die Eigenschaft flex-wrap auf wrap, um die Eigenschaft align-content besser zu demonstrieren.

Beispiel

space-between Der Wert zeigt die Flex-Linien an, die zwischen den Linien gleiche Abstände haben:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Versuchen Sie es selbst

Beispiel

space-around Der Wert zeigt die Flex-Linien an, die vor, zwischen und nach den Linien mit Leerzeichen haben:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Versuchen Sie es selbst

Beispiel

stretch Der Wert dehnt die Flex-Linien aus, um den verbleibenden Raum zu füllen (Standard):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Versuchen Sie es selbst

Beispiel

center Der Wert wird in der Mitte des Containers angezeigt, um die Flex-Linien anzuzeigen:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Versuchen Sie es selbst

Beispiel

flex-start Der Wert wird am Anfang des Containers angezeigt, um die Flex-Linien anzuzeigen:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Versuchen Sie es selbst

Beispiel

flex-end Der Wert wird am Ende des Containers angezeigt, um die Flex-Linien anzuzeigen:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Versuchen Sie es selbst

Perfekte Zentrierung

In diesem Beispiel werden wir ein sehr häufiges Stylisierungsproblem lösen: Perfekte Zentrierung.

Lösung: Setzen Sie justify-content und align-items Die Eigenschaft ist auf zentriert gesetzt, dann werden die flex Elemente perfekt zentriert:

Beispiel

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Versuchen Sie es selbst

Kinder-Elemente (Elemente)

Die direkten Kinder eines flex-Containers werden automatisch zu flexiblen (flex) Elementen.

1
2
3
4

上面的元素代表一个灰色 flex 容器内的四个蓝色 flex 项目。

Beispiel

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

Versuchen Sie es selbst

用于弹性项目的属性有：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order 属性

order 属性规定 flex 项目的顺序。

1
2
3
4

代码中的首个 flex 项目不必在布局中显示为第一项。

order 值必须是数字，默认值是 0。

Beispiel

order 属性可以改变 flex 项目的顺序：

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

Versuchen Sie es selbst

flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

1
2
3

该值必须是数字，默认值是 0。

Beispiel

使第三个弹性项目的增长速度比其他弹性项目快八倍：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

Versuchen Sie es selbst

flex-shrink 属性

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

1
2
3
4
5
6
7
8
9

该值必须是数字，默认值是 0。

Beispiel

不要让第三个弹性项目收缩得与其他弹性项目一样多：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Versuchen Sie es selbst

flex-basis 属性

flex-basis 属性规定 flex 项目的初始长度。

1
2
3
4

Beispiel

将第三个弹性项目的初始长度设置为 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Versuchen Sie es selbst

flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

Beispiel

使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Versuchen Sie es selbst

align-self 属性

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self Die Eigenschaft überschreibt die Standardausrichtung, die durch die Eigenschaft align-items des Containers festgelegt wurde.

1
2
3
4

In diesen Beispielen verwenden wir einen Container mit einer Höhe von 200 Pixeln, um die Eigenschaft align-self besser zu demonstrieren:

Beispiel

Setzen Sie das dritte flexible Element in die Mitte des Containers ausgerichtet:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Versuchen Sie es selbst

Beispiel

Setzen Sie das zweite flexible Element oben im Container ausgerichtet und das dritte flexible Element unten im Container ausgerichtet:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

Versuchen Sie es selbst

Responsive Bildergalerie mit Flexbox

Erstellen Sie mit Flexbox eine responsive Bildergalerie, die zwischen vier, zwei oder vollbreitigen Bildern wechselt, je nach Bildschirmgröße:

Versuchen Sie es selbst

Responsive Website mit Flexbox

Erstellen Sie mit Flexbox eine responsive Website, die flexible Navigationsleisten und flexible Inhalte enthält:

Versuchen Sie es selbst

CSS Flexbox-Eigenschaften

Die folgende Tabelle listet die mit Flexbox verwendeten CSS-Eigenschaften auf:

Eigenschaft Beschreibung
display Bestimmt den Box-Typ für HTML-Elemente.
flex-direction Bestimmt die Richtung der flexiblen Elemente innerhalb des flexiblen Containers.
justify-content Ausschließlich horizontale Ausrichtung dieser Elemente, wenn die flexiblen Elemente nicht den gesamten verfügbaren Raum der Hauptachse nutzen.
align-items Ausschließlich vertikale Ausrichtung dieser Elemente, wenn die flexiblen Elemente nicht den gesamten verfügbaren Raum der Hauptachse nutzen.
flex-wrap Bestimmt, ob die flexiblen Elemente umgebrochen werden sollen, wenn keine ausreichende Platz in einer Flex-Linie vorhanden ist.
align-content Ändert das Verhalten der Eigenschaft flex-wrap. Ähnlich wie align-items, aber es ausrichtet nicht die flexiblen Elemente, sondern die Flex-Linie.
flex-flow Kurzschreibweise der Eigenschaften flex-direction und flex-wrap.
order Bestimmt die Reihenfolge der flexiblen Elemente innerhalb desselben Containers.
align-self Für flexible Elemente. Überschreibt die Eigenschaft align-items des Containers.
flex Kurzschreibweise der Eigenschaften flex-grow, flex-shrink und flex-basis.