CSS/Tutorials/Flexbox/Flex-Items

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Flexbox(Weitergeleitet von Flex-grow)
Wechseln zu: Navigation, Suche

Nicht nur der umgebende Container, sondern auch die einzelnen Kind-Elemente (engl. flex items) können mit Flexbox formatiert werden.

Flex-Items formatieren[Bearbeiten]

Beispiel: flexible Elemente ansehen …
.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:

Beispiel: relative Breiten
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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

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[Bearbeiten]

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

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


Beispiel: flexible Elemente mit unterschiedlichen Breiten ansehen …
.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.
Beachten Sie: Der Regelsatz wirkt auf die schmalen p-Elemente. Bei den section-Elementen, die mehr Inhalt haben, bleibt die Festlegung wirkungslos.

flex-basis[Bearbeiten]

Mit der Eigenschaft flex-basis können Sie einem Flex-Item eine Basisbreite geben.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

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
Beispiel: flexible Elemente mit unterschiedlichen Breiten ansehen …
.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.
Beachten Sie: Es macht überhaupt nichts, wenn die Summe der Prozentwerte der flex-items nicht auf 100% kommt, oder sogar darüber liegt. Der Browser rechnet die Werte zusammen und erstellt die passenden Anteile für jedes Flex-Item.

flex-shrink[Bearbeiten]

Mit der Eigenschaft flex-shrink können Sie den Schrumpffaktor eines flexiblen Elements beeinflussen. Der Browser berechet 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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

Folgende Angabe ist nötig:

  • Zahl: reelle, nicht negative Zahl, die den zusätzlichen Schrumpffaktor anzeigt (Standardwert = 1)
Beispiel: flexible Elemente mit Schrumpffaktor ansehen …
.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[Bearbeiten]

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:

Beispiel: unterschiedliche Breiten mit flex ansehen …
.flex-item {
	flex: 1 1 0%;
}

.ausnahme1 {
	flex: 2 1 0%;	
}

.ausnahme2 {
	flex: 3 1 0%;	
}
Alle Flex-Items erhalt 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.
Empfehlung: Verwenden Sie die zusammenfassende Eigenschaft flex, dabei ist es aber vorteilhaft, neben einem Wert für flex-grow auch Werte für flex-shrink und flex-basis anzugeben.
Beachten Sie: Der Internet Explorer hat in den Versionen 10 und 11 einen Bug, der in der Shorthand-Eigenschaft flex Angaben für flex-basis ignoriert, wenn Sie keine Einheiten haben.
Verwenden Sie flex: 1 1 0%; anstelle von flex: 1 1 0; [1].


Weblinks[Bearbeiten]

  1. Philipp Walton: flexbugs