CSS/Tutorials/Flexbox/Flex-Items
- 15min
- leicht
Nicht nur der umgebende Container, sondern auch die einzelnen Kind-Elemente (engl. flex items) können mit Flexbox formatiert werden.
Inhaltsverzeichnis
Flex-Items formatieren
.flex-container {
display: flex;
}
.flex-item {
flex: auto;
}
Im Beispiel erhalten alle Kind-Elemente innerhalb des flexiblen Containers die CSS-Eigenschaft flex: auto.
Wie Sie sehen können, sind nicht nur die Textblöcke unten, sondern auch die p-Elemente in der oberen Reihe nun über die gesamte Breite verteilt. Ihre Breite richtet sich nicht nach irgendeiner CSS-Festlegung, sondern nach dem verfügbaren Platz. Wenn sich der Viewport verändert, verändert sich auch die Breite der Elemente.
Einer der großen Vorteile der Flexbox ist die einfache Handhabung. Wenn man bisher mehrere Elemente nebeneinander platzieren wollte, musste man (wenn auch einfache) mathematische Rechnungen anstellen, um auf die gewünschten Prozentwerte für Breiten zu kommen. Mit der einfachen Einstellung flex: 1; bekommen alle Elemente die gleiche Breite. Soll ein Element doppelt so groß werden, ist dies einfach zu bewerkstelligen:
nav, footer {
flex: 1;
}
main {
flex: 2;
}
Die Eigenschaft flex legt die Breite (und Höhe) eines Flex-Items fest. Sie ist die zusammenfassende Eigenschaft von flex-grow, flex-shrink und flex-basis.
Mit flex-basis können Sie eine Basisbreite angeben, wobei sich das flexible Element an den tatsächlich verfügbaren Platz anpasst, indem es die Leerräume zwischen den Elementen gleichmäßig verteilt. Mit flex-grow und flex-shrink können Sie Wachstum- und Schrumpffaktoren bestimmen, die das Verhalten bei geringeren und breiteren Breiten regelt.
flex-grow
Mit der Eigenschaft flex-grow können Sie einem flexiblen Element einen Wachstumsfaktor zuordnen. Wenn Sie den Wert von flex-grow erhöhen, verbreitern Sie es entsprechend. Der Browser rechnet die Breiten der flexiblen Elemente entsprechend um.
Folgende Angaben sind möglich:
-
0: (Standardwert) das Element verändert seine Breite nicht -
Zahl: Das Element bekommt eine Breite relativ zu den anderen flexiblen Geschwisterelementen und in Abhängigkeit vom zur Verfügung stehenden Platz. -
initial -
inherit
.flex-item {
flex-grow: 1;
}
.flex-item:nth-of-type(2) {
flex-grow: 2;
}
Alle flexiblen Elemente erhalten nun eine Breite von flex-grow: 1. Das jeweils zweite Element wird über den nth-of-type-Selektor ausgewählt und erhält mit flex-grow: 2 die doppelte Breite. Die anderen Elemente werden entsprechend schmaler.
flex-basis: 15em eine Breitenvorgabe machen, dann wird auch die zweite Section verbreitert. Die flex-basis-Angabe sollte dabei so gewählt sein, dass auch bei schmalen Viewports noch eine Lesbarkeit gegeben ist.flex-shrink
Mit der Eigenschaft flex-shrink können Sie den Schrumpffaktor eines flexiblen Elements beeinflussen. Der Browser berechnet auch ohne Angabe von flex-shrink einen Schrumpffaktor, als Verhältnis der Basisgrößen der flexiblen Elemente. Der Wert, den Sie für flex-shrink angeben, wird für die Berechnung des Schrumpffaktors mit der Basisgröße der flexiblen Elemente multipliziert.
Folgende Angabe ist nötig:
Zahl: reelle, nicht negative Zahl, die den zusätzlichen Schrumpffaktor anzeigt (Standardwert = 1)
.flex-item {
flex-grow: 1;
flex-basis: 20%;
flex-shrink: 1;
}
.flex-item:nth-of-type(2) {
flex-shrink: 3;
}
Alle flexiblen Elemente erhalten nun eine Breite von flex-grow: 1, eine flex-basis von 20% und einen Schrumpffaktor mit flex-shrink: 1. Das jeweils zweite Element wird über den nth-of-type-Selektor ausgewählt und erhält mit flex-shrink: 3 den dreifachen Schrumpffaktor. Wenn sie den Viewport zusammenziehen, werden die p-Elemente schmaler, das zweite p-Elementen aber um den dreifachen Faktor.
Diese Festlegung wirkt aber nicht auf die section-Elemente, da deren flex-basis zusammen nur 60% ergibt.
flex-basis
Mit der Eigenschaft flex-basis können Sie einem Flex-Item eine Basisbreite geben.
Folgende Angaben sind möglich:
feste Längenangabe: Ist die Flexbox breiter als die Summe der einzelnen Elemente, bleibt die überschüssige Fläche frei.Wert in Prozent: Die Summe der Prozentwerte der einzelnen Elemente muss nicht 100% betragen, ist sie kleiner oder größer, wird sie passend umgerechnet.auto: (Standardwert) Breite wird flexibel angepasst.content: Breite orientiert sich am Elementinhalt.inherit
.flex-item {
flex-grow: 1;
flex-basis: 10%;
}
.flex-item:nth-of-type(2) {
flex-basis: 20%;
}
Alle flexiblen Elemente erhalten nun eine Breite von flex-grow: 1 und eine flex-basis von 10%.. Das jeweils zweite Element wird über den nth-of-type-Selektor ausgewählt und erhält mit flex-basis: 20% die doppelte Breite. Die anderen Elemente werden entsprechend schmaler.
Diese Festlegung wirkt sowohl auf die schmalen p-Elemente wie auch die breiteren section-Elemente.
flex
Die Eigenschaft flex ist die zusammenfassende Eigenschaft von flex-grow, flex-shrink und flex-basis. Sie gibt dem Element eine Breite relativ zu den anderen flexiblen Geschwisterelementen und in Abhängigkeit vom zur Verfügung stehenden Platz.
Der oben verwendete Wert flex: auto entspricht flex: 1 1 0%. Dabei verteilen sich alle vorhandenen Elemente innerhalb des Viewports. Jedes Element nimmt einen Bruchteil der gesamten Breite ein.
Dabei sind auch unterschiedliche Breiten möglich:
.flex-item {
flex: 1 1 0%;
}
.ausnahme1 {
flex: 2 1 0%;
}
.ausnahme2 {
flex: 3 1 0%;
}
Alle Flex-Items erhalten mit flex: 1 1 0%; die gleiche Breite. In der zweiten und dritten Reihe gibt es Ausnahmen, die die doppelte, bzw. dreifache Breite erhalten. Die anderen Flex-Items passen sich automatisch an die verfügbare Breite an.
Stapelkontext mit z-index
Flex-Items bilden, wenn sie einen z-index ungleich auto zugewiesen bekommen, einen eigenen Stapelkontext.
Weblinks
- W3C: flex-property
- Referenz: CSS/Eigenschaften/flex
