Ein weiterer Schritt im Flexbox Modell mit flex-grow, -shrink und -basis
Ein weiterer Schritt im Flexbox Modell mit flex-grow, -shrink und -basis

Ein weiterer Schritt im Flexbox Modell mit flex-grow, -shrink und -basis

Tutorial

Im vorigen Beitrag bin ich auf die Basics von Flexbox eingegangen. Dabei ging es um display: flex; und wie man es einsetzt. Nachdem ich in einem Beispiel gezeigt hatte wie Parent- und Child-Container in Beziehtung stehen.

Wir unterscheiden im Flexbox Modell zwischen Flexcontainer und Flexitems, wobei der Flexcontainer das Elternelement und das Flexitem das Kindelement. Im folgenden und auch kommenden Beiträgen zum Thema werde ich die Begriffe Flexcontainer und Flexitem benutzen, da sie allgemein gebräuchlihc sind.

Im Übrigen werde ich ab jetzt öfters mit internen Stylesheets arbeiten. Da es sich hier um Anwendungsbeispiele mit fast identischem HTML-Code handelt und ich nicht jedes Mal ein neues Stylesheet verlinken will, erleichtert es mir die Arbeit. Bei grösseren Projekten allerdings arbeite ich bevorzugt mit externen Stylesheets.

Flexitems in ihrer Grösse beeinflussen

Ich beginne mit dem Code und einer kurzen Beschreibung was ich hier aufzeigen möchte. Wie im vorigen Beispiel arbeite ich hier mit den gleichen Elementen und fast dem gleichen Stylesheet, nur dass ich diesmal flex-basis, -grow und -shrink nutzen werde.

flex-basis

<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8">
    <style>
      body {
        background-color: black;
      }
      #parent {
        width: 50%;
        background-color: white;
        display: flex;
      }
      #child {
        flex-basis: 100px;
      }
      .red {
        background: red;
        color: white;
      }
      .green {
        background: green;
        color: white;
      }
      .blue {
        background: blue;
        color: white;
      }
      .yellow {
        background: yellow;
        color: black;
      }
    </style>
    <title>Flex-Basis-Grow-Shrink</title>
  </head>
  <body>
    <div id="parent">
      <div id="child" class="red">Header</div>
      <div id="child" class="green">Nav</div>
      <div id="child" class="blue">Main</div>
      <div id="child" class="yellow">Footer</div>
    </div>
  </body>
</html>

Mit flex-basis kann man die Grösse der Flexitems festlegen. Diese habe ich hier auf alle Flexitems (#child) mit 100px festgelegt.

Der Flexcontainer (#parent) hat die Breite 50% im Bezug zum Display (hier Desktop), die Items darin sind auf 100px beschränkt. Folglich reihen sich diese in Spalten von links nach rechts an und übrig bleibt der weisse Hintergrund des Flexcontainers.

flex-grow

Wenn wir nun zum Beispiel dem roten Flexitem die Deklaration flex-grow: 1; zuordnen, dann wird dieser die maximal übrig gebliebene Breite einnehmen. Also Breite #parent minus fixe Breite der übrigen Flexitems.

      #parent {
        width: 50%;
        background-color: white;
        display: flex;
      }
      #child {
        flex-basis: 100px;
      }
      .red {
        background: red;
        color: white;
        flex-grow: 1;

Das Resultat sieht dann so aus

Wenn ich nun noch dem blauen Flexitem die gleiche Deklaration zuornde, dann werden sich Rot und Blau ganz einfach die restliche Breite untereinander aufteilen.

      #parent {
        width: 50%;
        background-color: white;
        display: flex;
      }
      #child {
        flex-basis: 100px;
      }
      .red {
        background: red;
        color: white;
        flex-grow: 1;
      }
      .green {
        background: green;
        color: white;
      }
      .blue {
        background: blue;
        color: white;
        flex-grow: 1;

Nun sieht das Resultat so aus

Rot und Blau teilen sich die Extrabreite untereinander gleich auf.

Frage: Kann man auch einen Wert grösser als 1 eingeben? Ja, kann man.

      .red {
        background: red;
        color: white;
        flex-grow: 3;
      }
      .green {
        background: green;
        color: white;
      }
      .blue {
        background: blue;
        color: white;
        flex-grow: 1;

Was nun passier ist Folgendes. Rot und Blau teilen sich noch immer die Extrabreite untereinander auf, jedoch zu unterschiedlichen Teilen.

Da Rot nun den Wert 3 hat, ist die Extrabreite für Rot dreimal so breit wie die von Blau, welcher den Wert 1 hat. Das Resultat sieht dann so aus.

flex-shrink

Im letzten Codebeispiel habe ich die Breite des Flexcontainers auf 100% gesetzt. Die Flexitems haben die fixe Breite von 300px.

      #parent {
        width: 100%;
        background-color: white;
        display: flex;
      }
      #child {
        flex-basis: 300px;
      }
      .red {
        background: red;
        color: white;
        flex-shrink: 2;
      }
      .green {
        background: green;
        color: white;
      }
      .blue {
        background: blue;
        color: white;
        flex-shrink: 2;
      }
      .yellow {
        background: yellow;
        color: black;
      }

Auf einem Desktop Screen sieht das dann so aus.

Rot und Blau bekommen haben hier die Deklaration flex-shrink: 3; Wenn ich das Browserfenster nun langsam in der Breite verkleinere werden sich die Flexitems ungleich verkleinern.

Was passiert hier genau?

  • Beim Verkleinern des Browserfensters ist irgendwann der Punkt erreicht wo die Gesamtbreite der Flexitems erreicht wurde, hier 1200px (4 Contianer à 300px).
  • Ab hier ist der Hintergrund (#parent) nicht mehr zu sehen da er von den Flexitems vollständog ausgenommen wird.
  • Wenn wir das Browserfenster weiter in der Breite verkleinern, dann schrumpfen die Flexitems damit sie innerhalb des Flexcontainers Platz haben.

Rot und Blau allerdings schrumpfen im Verhältnis anders als Gelb und Grün und das um den Faktor 2 den wir mit flex-shrink festgelegt haben. Das Bedeutet dass Blau und Rot doppelt so viel Breite einbüssen als Grün und Gelb.

Hätte flex-shrink bei Rot und Blau den Faktor 10, hiesse das dass Rot und Blau 10 mal soviel an Breite einbüssen wie die beiden anderen Flexitems.

Fazit

Um flex-basis, flex-grow und flex-shrink gut verstehen zu können, probiert man dies am Besten selbst aus. Du kannst Dir gerne meinen Code in Dienen Editor kopieren und ein wenig damit herum experimentieren.

Schau Dir gerne parallel dazu noch dieses Video an in dem das Thema nochmal gut veranschaulicht wird.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.