Die Eigenschaft flex
Die Eigenschaft flex ist eine Kurzform für flex-basis,
flex-shrink
und flex-grow.
Anwendbar auf: ein spezifisches Flex-Element.
Die Reihenfolge der Werte spielt keine Rolle. Der zweite und dritte
Parameter (flex-shrink, flex-basis)
sind optional.
Werte
Siehe entsprechende Eigenschaften.
Standardwert: 0 1 auto.
Beispiel
Nehmen wir an, wir haben 3 Elemente. Die Breite jedes Elements
beträgt 200px und insgesamt 600px,
was größer ist als die Breite des übergeordneten Containers, die
300px beträgt. Weisen wir dem ersten Element eine Breite von
200px zu, dem zweiten Element - 300px, dem
dritten Element - 100px. Bei allen Elementen
soll der Wert flex-basis 1 betragen,
und flex-shrink - 1, 2, 3 entsprechend
der Reihenfolge der Elemente:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
Siehe auch
-
die Eigenschaft
flex-direction,
die die Achsenrichtung von Flex-Elementen festlegt -
die Eigenschaft
justify-content,
die die Ausrichtung entlang der Hauptachse festlegt -
die Eigenschaft
align-items,
die die Ausrichtung entlang der Querachse festlegt -
die Eigenschaft
flex-wrap,
die den Umbruch von Flex-Elementen festlegt -
die Eigenschaft
flex-flow,
die Kurzform für flex-direction und flex-wrap -
die Eigenschaft
order,
die die Reihenfolge der Flex-Elemente festlegt -
die Eigenschaft
align-self,
die die Ausrichtung eines einzelnen Elements festlegt -
die Eigenschaft
flex-basis,
die die Größe eines spezifischen Flex-Elements festlegt -
die Eigenschaft
flex-grow,
die das Wachstumsverhalten von Flex-Elementen festlegt -
die Eigenschaft
flex-shrink,
die die Schrumpffähigkeit von Flex-Elementen festlegt
