flex-shrink, flex-grow, flex-basis

flex grow, flex shrink, flex basis

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Platz verteilen

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 sind Eigenschaften der Flex-Elemente – den 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. Für den Abstand zwischen den Flex-Elementen sorgt hier die CSS-Eigenschaft gap (nicht IE11).

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, die mit flex-grow:1 notiert sind.
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 den Items verteilt wird. flex-basis kann ein absoluter 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%}

Kurzschrift 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.