flex-shrink, flex-grow, flex-basis

Pfeil-Symbole für flex-shrink, flex-grow

Breite und Höhe der Elemente (Flex-Items) innerhalb einer Flexbox können wie alle Breiten- oder Höhenangaben als px, em oder in Prozentanteilen festgelegt werden.

flex-shrink, flex-grow und flex-basis verteilen den freien Platz oder steuern das Stauchen, wenn das Platzangebot der Flexbox zu klein oder zu groß für die Flex-Items ist.

flex-shrink, flex-grow und flex-basis sind Eigenschaften der Flex-Items – der direkten Nachkommen eines Flex-Containers. Ohne die Angabe von flex-shrink, flex-grow und flex-basis können die Inhalte der Flex-Items größer oder kleiner als der Raum des Flex-Containers sein.

  • Wenn der Raum zu klein ist, um die volle Breite der Flex-Items aufzunehmen, verkleinert flex-shrink die Elemente.
  • Wenn der Raum größer ist, verteilt flex-grow den überschüssigen Raum.

display-flex ist zuverlässiger und intuitiver als eine Positionierung auf der Basis von float. flex-grow, flex-shrink und flex-basis hingegen bildet bei aller Flexibilität ein komplexes Geflex.

Die Beispiele hier beschränken sich auf eine Zeile und sind ohne padding und border, damit sie einfacher nachzuvollziehen sind.

flex-shrink

flex-shrink legt fest, um welchen Faktor ein Flex-Item gegenüber den anderen Flex-Items schrumpft, wenn der Raum des Flex-Containers zu klein wird.

Der Vorgabewert ist 1 – anteilig. flex-shrink: 0 verhindert das Verkleinern des Flex-Items.

Flex-Container verkleinern

Als es klingelte, nachts, es war kurz vor halb zehn.

Als es klingelte, nachts, es war kurz vor halb zehn.

Als es klingelte, nachts, es war kurz vor halb zehn.

.flexitem:nth-child(1) { flex-shrink: 1}
.flexitem:nth-child(2) { flex-shrink: 1; background: orange}
.flexitem:nth-child(3) { flex-shrink: 1}

Sobald ein Element mit flex-grow oder flex-shrink deklariert ist, erstrecken sich die Items über die komplette Zeile. Angaben wie justify-content: space-between oder space-around werden ignoriert.

flex-grow

flex-grow ist der Faktor für die Aufteilung des freien Raums (wenn der Flex-Container größer ist als die Inhalte): flex-grow ist der Wachstums-Faktor gegenüber den anderen Flex-Items.

flex-grow:2 besagt nicht, dass ein Element doppelt so groß wie Elemente mit flex-grow:1 werden – nur sein Anteil am Wachstum ist doppelt so groß wie der Anteil der Items mit flex-grow:1 (dem Vorgabewert).

  • 0: Nicht verbreitern. Entweder die Breite des Elements oder flex-basis.
  • 1: Vorgabe: Gleiche Breite wie alle Flex-Items innerhalb der Zeile.
  • ≥2 Verbreitern um den Faktor 2 gegenüber allen übrigen Flex-Items flex-grow:1 innerhalb der Zeile
Flex-Container verkleinern
Anfängliche Breite der Flex-Items
Breite der Flex-Items nach flex-grow
.flexitem:nth-child(1) { flex-grow:1}
.flexitem:nth-child(2) { flex-grow:1; background: orange; }
.flexitem:nth-child(3) { flex-grow:1}

Beispiel für flex-grow

Breite der Flexbox: 800px
Breite der Flex-Items: je 160px
Freier Platz: 800 - 3*160 = 320px

.flexitem:nth-child(1) { flex-grow: 1} = 320: 4 = 80
.flexitem:nth-child(2) { flex-grow: 2} = 320: 4 * 2 = 160
.flexitem:nth-child(3) { flex-grow: 1} = 320: 4 = 80

Nach der Verteilung des freien Raums

.flexitem:nth-child(1) 160px + 80px = 240px
.flexitem:nth-child(2) 160px + 160px = 320px
.flexitem:nth-child(3) 160px + 80px = 240px

flex-basis

flex-basis ist die anfängliche Breite der Flex-Items, bevor freier Platz unter dem Item verteilt wird und kann ein absolute Wert oder ein Anteil in % sein.

Mögliche Werte

auto, 10em, 200px, 10% fill, max-content, min-content, fit-content, content

Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
.fb:nth-child(1) { flex-basis: 25%}
.fb:nth-child(2) { flex-basis: 15%; background-color:orange}
.fb:nth-child(3) { flex-basis: 25%}
100px 50%

flex

Flex ist die Kurzschrift für flex-shrink, flex-grow und flex-basis.

Lorem ipsum dolor sit amet, consectetur adipiscing
Lorem ipsum dolor sit amet, consectetur adipiscing
Lorem ipsum dolor sit amet, consectetur adipiscing
.ff:nth-child(1) { flex: 1 1 10%} 
.ff:nth-child(2) { flex: 1 1 25%}
.ff:nth-child(3) { flex: 1 1 10%}

Auch wenn die Inhalte der Flex-Items nur 45% ausmachen: Die Flexbox erstreckt sich über die gesamte Breite, denn in der Kurzschrift stecken flex-shrink und flex-grow.

margin in Flex-Containern

Der Abstand zwischen neben- und untereinander liegenden Flex-Item kann über justify-content und die Breite der Flex-Items geregelt werden oder mittels der CSS-Eigenschaft margin.

Mehr zu display: flex

shrink grow