Detaillierte Erläuterung der Berechnungsmethode von Flex-Grow und Flex-Shrink im Flex-Layout

Flex(彈性布局) in CSS kann das Layout einer Webseite flexibel steuern. Die Breite/Höhe von Elementen in einem Flex -Layout wird durch drei Eigenschaften bestimmt:
flex-basis , flex-grow , flex-shrink .

Flex-Basis

flex-basis bestimmt, wie viel Platz das Element auf der Hauptachse einnimmt. Sofern es nicht mit box-sizing festgelegt wird, legt es die Größe des Inhaltsfelds fest. Sie müssen also bei der Angabe der Größe eines Flex-Elements vorsichtig sein, da es wahrscheinlich Polsterung und Ränder enthält.

Sie können einen bestimmten CSS-Größenwert dafür angeben oder den Prozentsatz des übergeordneten Elements angeben, den es einnimmt. Der Standardwert ist auto (Größe automatisch an den Inhalt anpassen).

<!-- demo-1 -->

  <div Klasse="übergeordnet">
    <div Klasse="child1">100px</div>
    <div Klasse="child2">200px</div>
  </div>
  <div Klasse="übergeordnet">
    <div class="child1">10 %</div>
    <div class="child2">20 %</div>
  </div>
  <div Klasse="übergeordnet">
    <div class="child1">30 %</div>
    <div class="child2">auto</div>
  </div>

  <Stil>
    .übergeordnet {
      Breite: 500px;
      Anzeige: Flex;
      Rand unten: 15px;
      Textausrichtung: zentriert;
      Hintergrundfarbe: #eeeeee;
    }

    /** Pixelwert */
    .übergeordnet:n-tes-Kind(1) .Kind1 {
      Flex-Basis: 100px;
      Hintergrundfarbe: #356969
    }
    .übergeordnet:n-tes-Kind(1) .Kind2 {
      Flex-Basis: 200px;
      Hintergrundfarbe: #369925;
    }

    /** Prozentsatz */
    .übergeordnet:n-tes-Kind(2) .Kind1 {
      Flex-Basis: 10%;
      Hintergrundfarbe: #356969
    }
    .übergeordnet:n-tes-Kind(2) .Kind2 {
      Flex-Basis: 20 %;
      Hintergrundfarbe: #369925;
    }

    /** automatisch*/
    .übergeordnet:n-tes-Kind(3) .Kind1 {
      Flex-Basis: 30%;
      Hintergrundfarbe: #356969
    }
    .übergeordnet:n-tes-Kind(3) .Kind2 {
      Flex-Basis: Auto;
      Hintergrundfarbe: #369925;
    }
  </Stil> 

Flexibel wachsen

flex-grow legt die Skalierung des Elements fest, wenn im Flex-Container noch Platz vorhanden ist (die Größe des Flex-Containers abzüglich der Summe der Größen aller Flex-Elemente). Der Standardwert ist 0 (es wird nicht vergrößert, auch wenn noch Platz vorhanden ist). Wenn alle Elemente den gleichen Flex-Grow-Eigenschaftswert haben, teilen sie sich den verbleibenden Platz gleichmäßig, andernfalls werden sie entsprechend den durch die unterschiedlichen Eigenschaftswerte definierten Verhältnissen verteilt.

Wenn beispielsweise die Hauptachsenlänge 600 Pixel beträgt, nimmt Element 1 50 Pixel, Element 2 100 Pixel und Element 3 150 Pixel ein. Der verbleibende Platz beträgt dann: 600 Pixel – (50 Pixel + 100 Pixel + 150 Pixel) = 300 Pixel.

Wenn der Eigenschaftswert flex-grow der einzelnen Elemente gleich ist (z. B. alle den Wert 1 haben), wird allen Elementen der gleiche verbleibende Speicherplatz zugewiesen:
- Element 1: 300px * (1 / (1 + 1 + 1)) = 100px;
- Element 2: 300px * (1 / (1 + 1 + 1)) = 100px;
- Element 3: 300px * (1 / (1 + 1 + 1)) = 100px;

  <!-- demo-2 -->

  <div Klasse="übergeordnet">
    <div Klasse="child1">50px + 100px</div>
    <div Klasse="child2">100px + 100px</div>
    <div class="child3">150px + 100px</div>
  </div>

  <Stil>
    .übergeordnet {
      Breite: 600px;
      Anzeige: Flex;
      Textausrichtung: zentriert;
      Farbe: #eee;
    }

    .Kind1 {
      Flex-Basis: 50px;
      Flex-Wachstum: 1;
      Hintergrundfarbe: #0066CC;
    } 

    .Kind2 {
      Flex-Basis: 100px;
      Flex-Wachstum: 1;
      Hintergrundfarbe: #009900;
    }

    .Kind3 {
      Flex-Basis: 150px;
      Flex-Wachstum: 1;
      Hintergrundfarbe: #CC3300;
    }
  </Stil> 

Angenommen, die Werte der Flex-Grow-Eigenschaft der einzelnen Elemente sind nicht identisch. Beispiel: Element 1 ist 1, Element 2 ist 2 und Element 3 ist 3. Dann beträgt der ihnen zugewiesene verbleibende Speicherplatz:
- Element 1: 300px * (1 / (1 + 2 + 3)) = 50px;
- Element 2: 300px * (2 / (1 + 2 + 3)) = 100px;
- Element 3: 300px * (3 / (1 + 2 + 3)) = 150px;

  <!-- demo-3 -->

  <div Klasse="übergeordnet">
    <div Klasse="child1">50px + 50px</div>
    <div Klasse="child2">100px + 100px</div>
    <div Klasse="child3">150px + 150px</div>
  </div>

  <Stil>
    .übergeordnet {
      Breite: 600px;
      Anzeige: Flex;
      Textausrichtung: zentriert;
      Farbe: #eee;
    }

    .Kind1 {
      Flex-Basis: 50px;
      Flex-Wachstum: 1;
      Hintergrundfarbe: #0066CC;
    } 

    .Kind2 {
      Flex-Basis: 100px;
      Flex-Wachstum: 2;
      Hintergrundfarbe: #009900;
    }

    .Kind3 {
      Flex-Basis: 150px;
      Flexibel wachsen: 3;
      Hintergrundfarbe: #CC3300;
    }
  </Stil>

Was ist, wenn der Attributwert eine Dezimalzahl ist? Hier gibt es zwei Situationen:
1. Wenn die Summe der Flex-Gorw-Attributwerte aller Flex-Elemente größer als 1 ist, wird die Berechnung dennoch auf die obige Weise durchgeführt.
2. Die Summe der Flex-Gorw-Attributwerte aller Flex-Elemente ist kleiner als 1 und der Basiswert wird als 1 berechnet. Wenn beispielsweise Element 1 0,2, Element 2 0,3 und Element 3 0,4 ist, beträgt der ihnen zugewiesene verbleibende Speicherplatz:
- Element 1: 300px * (0,2 / 1) = 60px;
- Element 2: 300px * (0,3 / 1) = 90px;
- Element 3: 300px * (0,4 / 1) = 120px;

 <!-- demo-4 -->

  <div Klasse="übergeordnet">
    <div Klasse="child1">50px + 60px</div>
    <div Klasse="child2">100px + 90px</div>
    <div class="child3">150px + 120px</div>
  </div>

  <Stil>
    .übergeordnet {
      Breite: 600px;
      Anzeige: Flex;
      Textausrichtung: zentriert;
      Farbe: #eee;
    }

    .Kind1 {
      Flex-Basis: 50px;
      Flex-Wachstum: 0,2;
      Hintergrundfarbe: #0066CC;
    } 

    .Kind2 {
      Flex-Basis: 100px;
      Flex-Wachstum: 0,3;
      Hintergrundfarbe: #009900;
    }

    .Kind3 {
      Flex-Basis: 150px;
      Flex-Wachstum: 0,4;
      Hintergrundfarbe: #CC3300;
    }

Flex-Schrumpf

Flex-Shrink legt den Vergrößerungsfaktor des Elements fest, wenn im Flex-Container nicht genügend Platz vorhanden ist. Der Standardwert ist 1 (das Element wird verkleinert, wenn nicht genügend Platz vorhanden ist).

Die Berechnungsmethode von Flex-Shrink unterscheidet sich geringfügig von Flex-Grow. Es gibt zwei Faktoren, die beeinflussen, wie stark das Flex-Element schrumpfen soll. Einer ist der Wert der Flex-Shrink-Eigenschaft und der andere die Größe des Flex-Elements selbst. Sie schrumpfen entsprechend ihrer jeweiligen Gewichte. Beispiel:

Die Hauptachsenlänge beträgt 600 Pixel, Element 1 belegt 100 Pixel, Element 2 belegt 300 Pixel, Element 3 belegt 500 Pixel und flex-shrink -Attributwerte jedes Elements sind jeweils 1, 3 und 2. Das Gesamtgewicht beträgt 100 Pixel 1 + 300 Pixel 3 + 500 Pixel * 2 = 2000 Pixel und die Gewichte jedes Elements sind:
- Element 1: (100px * 1) / 2000px = 0,05;
- Element 2: (300px * 3) / 2000px = 0,45;
- Punkt 3: (500px * 2) / 2000px = 0,50;
Die Länge des Überlaufraums beträgt: 100px + 300px + 500px – 600px = 300px;
Minimieren Sie dann jedes Projekt einzeln:
- Element 1: 300px * 0,05 = 15px;
- Element 2: 300px * 0,45 = 135px;
- Element 3: 300px * 0,50 = 150px;

 <!-- demo-5 -->

  <div Klasse="übergeordnet">
    <div Klasse="child1">100px - 15px</div>
    <div class="child2">300px – 135px</div>
    <div class="child3">500px – 150px</div>
  </div>
  <Stil>
    .übergeordnet {
      Breite: 600px;
      Anzeige: Flex;
      Textausrichtung: zentriert;
      Farbe: #eee;
    }

    .Kind1 {
      Flex-Basis: 100px;
      Flex-Schrumpf: 1;
      Hintergrundfarbe: #0066CC;
    } 

    .Kind2 {
      Flex-Basis: 300px;
      Flex-Schrumpf: 3;
      Hintergrundfarbe: #009900;
    }

    .Kind3 {
      Flex-Basis: 500px;
      Flex-Schrumpf: 2;
      Hintergrundfarbe: #CC3300;
    }
  </Stil> 

Wenn der Wert von Flex-Shrink eine Dezimalzahl ist, gibt es zwei Fälle:
1. Wenn die Summe der Flex-Shrink-Eigenschaftswerte aller Flex-Elemente größer als 1 ist, wird die Berechnung dennoch auf die obige Weise durchgeführt.
2. Die Summe der Flex-Shrink-Eigenschaftswerte aller Flex-Elemente ist kleiner als 1, und nur ein Teil des Überlaufraums wird verkleinert. Wenn beispielsweise Element 1 0,1, Element 2 0,3 und Element 3 0,2 ist, beträgt der gesamte Schrumpfraum:
300px * (0,1 + 0,3 + 0,2) = 180px
Die Gewichtsberechnungsmethode ist für alle Artikel gleich und jeder Artikel wird separat herunterskaliert:
- Element 1: 180px * 0,05 = 9px;
- Element 2: 180px * 0,45 = 81px;
- Element 3: 180px * 0,50 = 90px;

 <!-- demo-6 -->

  <div Klasse="übergeordnet">
    <div Klasse="child1">100px – 9px</div>
    <div class="child2">300px – 135px</div>
    <div class="child3">500px – 90px</div>
  </div>

    <Stil>
    .übergeordnet {
      Breite: 600px;
      Anzeige: Flex;
      Textausrichtung: zentriert;
      Farbe: #eee;
    }

    .Kind1 {
      Flex-Basis: 100px;
      Flex-Schrumpf: 0,1;
      Hintergrundfarbe: #0066CC;
    } 

    .Kind2 {
      Flex-Basis: 300px;
      Flex-Schrumpf: 0,3;
      Hintergrundfarbe: #009900;
    }

    .Kind3 {
      Flex-Basis: 500px;
      Flex-Schrumpf: 0,2;
      Hintergrundfarbe: #CC3300;
    }
  </Stil> 

Da nur ein Teil des Überlaufraums verkleinert wird, übersteigt die Gesamtbreite der Elemente innerhalb des Div tatsächlich die Breite des Div.

Das Obige ist eine kurze Einführung in die Berechnungsmethode von Flex-Grow und Flex-Shrink im Flex-Layout.

Der Code in diesem Blog wurde mit Github synchronisiert

Quellen:
[1]. MDN-Dokumentation https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis
[2]. MDN-Dokumentation https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
[3]. MDN-Dokumentation https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.