CSS -Flex- Container
Übergeordnetes Element (Container)
Wie wir im vorherigen Kapitel angegeben haben, ist dies ein Flex- Container (der blaue Bereich) mit drei Flex- Elementen :
1
2
3
Der Flex-Container wird flexibel, indem die displayEigenschaft auf
gesetzt wird flex:
Beispiel
.flex-container {
display: flex;
}
Die Flex-Container-Eigenschaften sind:
Die Flex-Direction-Eigenschaft
Die flex-directionEigenschaft definiert, in welche Richtung der Container die Flex-Items stapeln möchte.
1
2
3
Beispiel
Der columnWert stapelt die Flex-Elemente vertikal (von oben nach unten):
.flex-container {
display: flex;
flex-direction: column;
}
Beispiel
Der column-reverseWert stapelt die Flex-Elemente vertikal (aber von unten nach oben):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Beispiel
Der rowWert stapelt die Flex-Items horizontal (von links nach rechts):
.flex-container {
display: flex;
flex-direction: row;
}
Beispiel
Der row-reverseWert stapelt die Flex-Elemente horizontal (aber von rechts nach links):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Die Flex-Wrap-Eigenschaft
Die flex-wrapEigenschaft gibt an, ob die Flex-Elemente umbrechen sollen oder nicht.
Die folgenden Beispiele haben 12 Flex-Elemente, um die
flex-wrapEigenschaft besser zu demonstrieren.
1
2
3
4
5
6
7
8
9
10
11
12
Beispiel
Der wrapWert gibt an, dass die Flex-Elemente bei Bedarf umbrochen werden:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Beispiel
Der nowrapWert gibt an, dass die Flex-Elemente nicht umbrochen werden (dies ist die Standardeinstellung):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Beispiel
Der wrap-reverseWert gibt an, dass die flexiblen Elemente bei Bedarf in umgekehrter Reihenfolge umwickelt werden:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Die Flex-Flow-Eigenschaft
Die flex-flowEigenschaft ist eine abgekürzte Eigenschaft zum Festlegen der Eigenschaften
flex-directionund
flex-wrap.
Beispiel
.flex-container {
display: flex;
flex-flow: row wrap;
}
Die justify-content-Eigenschaft
Die justify-contentEigenschaft wird verwendet, um die Flex-Elemente auszurichten:
1
2
3
Beispiel
Der centerWert richtet die Flex-Elemente in der Mitte des Containers aus:
.flex-container {
display: flex;
justify-content: center;
}
Beispiel
Der flex-startWert richtet die Flex-Elemente am Anfang des Containers aus (dies ist die Standardeinstellung):
.flex-container {
display: flex;
justify-content: flex-start;
}
Beispiel
Der flex-endWert richtet die Flex-Elemente am Ende des Containers aus:
.flex-container {
display: flex;
justify-content: flex-end;
}
Beispiel
Der space-aroundWert zeigt die Flex-Elemente mit Leerzeichen vor, zwischen und nach den Zeilen an:
.flex-container {
display: flex;
justify-content: space-around;
}
Beispiel
Der space-betweenWert zeigt die Flex-Elemente mit Leerzeichen zwischen den Zeilen an:
.flex-container {
display: flex;
justify-content: space-between;
}
Die Eigenschaft align-items
Die align-itemsEigenschaft wird verwendet, um die Flex-Elemente auszurichten.
1
2
3
In diesen Beispielen verwenden wir einen 200 Pixel hohen Container, um die
align-itemsEigenschaft besser zu demonstrieren.
Beispiel
Der centerWert richtet die Flex-Items in der Mitte des Containers aus:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Beispiel
Der flex-startWert richtet die Flex-Elemente oben im Container aus:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Beispiel
Der flex-endWert richtet die Flex-Elemente am unteren Rand des Containers aus:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Beispiel
Der stretchWert dehnt die Flex-Elemente aus, um den Container zu füllen (dies ist die Standardeinstellung):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Beispiel
Der baselineWert richtet die Flex-Elemente wie ihre Grundlinien aus:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Hinweis: Das Beispiel verwendet eine andere Schriftgröße, um zu demonstrieren, dass die Elemente an der Textgrundlinie ausgerichtet werden:
1
2
3
Die align-content-Eigenschaft
Die align-contentEigenschaft wird verwendet, um die Flexlinien auszurichten.
1
2
3
4
5
6
7
8
9
10
11
12
In diesen Beispielen verwenden wir einen 600 Pixel hohen Container, dessen
flex-wrapEigenschaft auf gesetzt wrapist, um die Eigenschaft besser zu demonstrieren align-content.
Beispiel
Der space-betweenWert zeigt die Flexlinien mit gleichem Abstand zwischen ihnen an:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Beispiel
Der space-aroundWert zeigt die Flex-Linien mit Leerzeichen davor, dazwischen und danach an:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Beispiel
Der stretchWert streckt die Flexlinien, um den verbleibenden Platz einzunehmen (dies ist die Standardeinstellung):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Beispiel
Die centerWertanzeigen zeigen die Flexlinien in der Mitte des Containers an:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Beispiel
Der flex-startWert zeigt die Flexlinien am Anfang des Containers an:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Beispiel
Der flex-endWert zeigt die Flexlinien am Ende des Containers an:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Perfekte Zentrierung
Im folgenden Beispiel lösen wir ein sehr häufiges Stilproblem: perfekte Zentrierung.
LÖSUNG: Setzen Sie sowohl die justify-contentEigenschaften align-itemsals auch auf
center, und das Flex-Element wird perfekt zentriert:
Beispiel
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Die Eigenschaften des CSS-Flexbox-Containers
Die folgende Tabelle listet alle CSS-Flexbox-Container-Eigenschaften auf:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |