CSS Flex -Elemente
Untergeordnete Elemente (Elemente)
Die direkten untergeordneten Elemente eines Flex-Containers werden automatisch zu flexiblen (Flex-)Elementen.
1
2
3
4
Das obige Element repräsentiert vier blaue Flex-Elemente in einem grauen Flex-Container.
Beispiel
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Die Flex-Item-Eigenschaften sind:
Die Auftragseigenschaft
Die orderEigenschaft gibt die Reihenfolge der Flex-Elemente an.
1
2
3
4
Das erste Flex-Element im Code muss nicht als erstes Element im Layout erscheinen.
Der Bestellwert muss eine Zahl sein, der Standardwert ist 0.
Beispiel
Die Order -Eigenschaft kann die Reihenfolge der Flex-Elemente ändern:
<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>
Die Flex-Grow-Eigenschaft
Die flex-growEigenschaft gibt an, wie stark ein Flex-Element im Verhältnis zu den übrigen Flex-Elementen wächst.
1
2
3
Der Wert muss eine Zahl sein, der Standardwert ist 0.
Beispiel
Lassen Sie das dritte Flex-Item achtmal schneller wachsen als die anderen Flex-Items:
<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>
Die Flex-Shrink-Eigenschaft
Die flex-shrinkEigenschaft gibt an, wie stark ein Flex-Element im Verhältnis zu den übrigen Flex-Elementen schrumpft.
1
2
3
4
5
6
7
8
9
10
Der Wert muss eine Zahl sein, der Standardwert ist 1.
Beispiel
Lassen Sie das dritte Flex-Item nicht so stark schrumpfen wie die anderen Flex-Items:
<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>
Die Flex-Basis-Eigenschaft
Die flex-basisEigenschaft gibt die Anfangslänge eines Flex-Elements an.
1
2
3
4
Beispiel
Legen Sie die Anfangslänge des dritten Flex-Elements auf 200 Pixel fest:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
Die Flex-Eigenschaft
Die flexEigenschaft ist eine abgekürzte Eigenschaft für die Eigenschaften
flex-grow, flex-shrinkund flex-basis.
Beispiel
Machen Sie das dritte Flex-Element nicht erweiterbar (0), nicht schrumpfbar (0) und mit einer Anfangslänge von 200 Pixeln:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
Die Eigenschaft align-self
Die align-selfEigenschaft gibt die Ausrichtung für das ausgewählte Element innerhalb des flexiblen Containers an.
Die align-self Eigenschaft überschreibt die Standardausrichtung, die von der Eigenschaft des Containers festgelegt wird align-items.
1
2
3
4
In diesen Beispielen verwenden wir einen 200 Pixel hohen Container, um die
align-selfEigenschaft besser zu demonstrieren:
Beispiel
Richten Sie das dritte Flex-Element in der Mitte des Behälters aus:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
Beispiel
Richten Sie das zweite Flex-Element oben im Container und das dritte Flex-Element unten im Container aus:
<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>
Die Eigenschaften der CSS-Flexbox-Elemente
Die folgende Tabelle listet alle Eigenschaften von CSS-Flexbox-Elementen auf:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |