Detaillierte Erklärung der CSS-Elastic-Box Flex-Grow, Flex-Shrink und Flex-Basis

Die Funktionen der drei Attribute Flex-Grow, Flex-Shrink und Flex-Basis sind:

Wie verteilen untergeordnete Elemente im Flex-Layout den Platz des übergeordneten Elements, wenn das übergeordnete Element unterschiedliche Breiten aufweist?

(Hinweis: Diese drei Eigenschaften werden für untergeordnete Elemente festgelegt. Im folgenden Artikel geht es um übergeordnete Elemente, womit Elemente mit flexiblem Layout (display:flex) gemeint sind.)

Wie Sie sich diese drei Attribute schnell merken können, verrät Ihnen der Editor hier:

Die erste ist Flex-Basis. Basis bedeutet auf Englisch „Hauptkomponente“. Wenn es also mit Breite kombiniert wird, wird Breite definitiv eliminiert. Wenn Basis auf Breite trifft, heißt es, dass ich die Hauptkomponente bin und du die Nebenkomponente, also musst du beiseite treten, wenn du mich siehst.

Das zweite ist Flex-Grow. Die englische Bedeutung von „grow“ ist <erweitern, erweitern, vergrößern>. Das bedeutet, wenn die Breite des übergeordneten Elements größer ist als die Summe der Breiten der untergeordneten Elemente und das übergeordnete Element einen Überschuss aufweist, sagt Flex-Grow: „Ich möchte wachsen, ich möchte nach oben wachsen.“ Wie kann ich wachsen? Natürlich, indem ich den Platz des übergeordneten Elements teile. Siehe den Inhalt des zweiten Attributs unten

Das letzte ist Flex-Shrink. Shrink bedeutet auf Englisch <schrumpfen>. Das bedeutet, wenn die Breite des übergeordneten Elements kleiner ist als die Summe der Breiten der untergeordneten Elemente und die Breite des übergeordneten Elements überschreitet, sagt Flex-Shrink, dass die Welt da draußen zu bitter ist, also gehe ich lieber zurück in die Arme meines Vaters! Daher schrumpft Flex-Shrink in einem bestimmten Verhältnis. Siehe das dritte Attribut unten.

Die erste Eigenschaft: Flex-Basis

Dieses Attribut wird verwendet, um die Breite des Elements festzulegen. Tatsächlich kann width auch die Breite festlegen. Wenn für ein Element sowohl die Breite als auch die Flex-Basis festgelegt sind, wird der Wert der Breite durch die Flex-Basis überschrieben.

<style type="text/css" media="Bildschirm">
        .Kasten{
            Anzeige: Flex;
            Rand: 100px automatisch;
            Breite: 400px;
            Höhe: 200px;
        }
        .innere{
            Breite: 200px;
            Höhe: 100px;
            Flex-Basis: 300px;
            Hintergrund: rosa;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="Box">
    <div Klasse="inner">
    </div>
</div>
</body>

Siehe die folgende Abbildung: Ich habe die Breite auf width:200px; flex-basis:300px eingestellt; das Ergebnis zeigt, dass das Unterelement .inner das Attribut flex-basis anwendet;

Die zweite Eigenschaft: Flex-Grow

Mit dieser Eigenschaft wird festgelegt, wie untergeordnete Elemente den verbleibenden Platz des übergeordneten Elements verteilen, wenn die Breite des übergeordneten Elements größer ist als die Summe der Breiten aller untergeordneten Elemente (d. h., das übergeordnete Element verfügt über verbleibenden Platz). Der Standardwert von flex-grow ist 0, was bedeutet, dass das Element den verbleibenden Speicherplatz des übergeordneten Elements nicht anfordert. Wenn der Wert größer als 0 ist, bedeutet dies, dass es ihn anfordert. Je größer der Wert, desto anspruchsvoller ist es.

Beispiel: Das übergeordnete Element ist 400 Pixel breit und hat zwei untergeordnete Elemente: A und B. A ist 100 Pixel breit und B ist 200 Pixel breit. Der freie Platz beträgt 400-(100+200) = 100px. Wenn weder A noch B den verbleibenden Platz beanspruchen, verbleiben 100 Pixel freier Platz.

<Text>
<div Klasse="Box">
    <div Klasse="inner">
    </div>
    <div Klasse="inner1">
    </div>
</div>
</body>

.Kasten{
            Anzeige: Flex;
            Flex-Richtung: Reihe;
            Rand: 100px automatisch;
            Breite: 400px;
            Höhe: 200px;
            Rand: 1px durchgehend rot;
 
        }
        .innere{
            Flex-Basis: 100px;
            Höhe: 100px;
            Hintergrund: rosa;
        }
        .inner1{
            Flex-Basis: 200px;
            Höhe: 100px;
            Hintergrund: blau;
        }

Siehe Abbildung unten:

Wenn A den verbleibenden Speicherplatz anfordert: setze Flex-Grow auf 1, B fragt nicht danach. Die endgültige Größe von A ist seine eigene Breite (100px) + die Breite des verbleibenden Raums (100px) = 200px.

 .innere{
            Flex-Basis: 100px;
            Höhe: 100px;
            Hintergrund: rosa;
            Flex-Wachstum: 1;
        }
        .inner1{
            Flex-Basis: 200px;
            Höhe: 100px;
            Hintergrund: blau;
        }

Siehe Abbildung unten:

Wenn A und B beide den verbleibenden Speicherplatz beanspruchen, setzt A Flex-Grow auf 1 und B setzt Flex-Grow auf 2. Dann ist die endgültige Größe von A seine eigene Breite (100px) + die Breite des verbleibenden Raums, der durch A erhalten wird (100px (1/(1+2))), und die endgültige Größe von B ist seine eigene Breite (200px) + die Breite des verbleibenden Raums, der durch B erhalten wird (100px (2/(1+2))) (Hier gibt der Herausgeber nur die Formel an, Freunde können sie selbst berechnen.)

.innere{
            Flex-Basis: 100px;
            Höhe: 100px;
            Hintergrund: rosa;
            Flex-Wachstum: 1;
        }
        .inner1{
            Flex-Basis: 200px;
            Höhe: 100px;
            Hintergrund: blau;
            Flex-Wachstum: 2;
        }

Siehe Abbildung unten:

Die dritte Eigenschaft: Flex-Shrink

Mit dieser Eigenschaft wird festgelegt, wie das untergeordnete Element seine Breite reduziert, wenn die Breite des übergeordneten Elements kleiner ist als die Summe der Breiten aller untergeordneten Elemente (d. h., das untergeordnete Element überschreitet das übergeordnete Element). Der Standardwert von flex-shrink ist 1. Wenn die Breite des übergeordneten Elements kleiner ist als die Summe der Breiten aller untergeordneten Elemente, wird die Breite des untergeordneten Elements reduziert. Je größer der Wert, desto größer die Reduzierung. Wenn der Wert 0 ist, bedeutet dies keine Verringerung.

Beispiel: Das übergeordnete Element ist 400 Pixel breit und hat zwei untergeordnete Elemente: A und B. A ist 200 Pixel breit und B ist 300 Pixel breit. Dann beträgt die Gesamtbreite von A und B, die das übergeordnete Element überschreitet, (200+300)-400 = 100px. Wenn weder A noch B ihre Breite reduzieren, das heißt, beide Flex-Shrink auf 0 setzen, dann beträgt die Breite des übergeordneten Elements 100 Pixel.

 .Kasten{
            Anzeige: Flex;
            Flex-Richtung: Reihe;
            Rand: 100px automatisch;
            Breite: 400px;
            Höhe: 200px;
            Rand: 1px durchgehend rot;
 
        }
        .innere{
            Flex-Basis: 200px;
            Höhe: 100px;
            Hintergrund: schwarz;
             Flex-Schrumpfen: 0;
        }
        .inner1{
            Flex-Basis: 300px;
            Höhe: 100px;
            Hintergrund: blau;
            Flex-Schrumpfen: 0;
 
        }

Siehe Abbildung unten:

Wenn die Breite von A nicht abnimmt, setzen Sie „Flex-Shrink“ auf 0 und B nimmt ab. Die endgültige Größe von B ist seine eigene Breite (300px) - die Gesamtbreite, die das übergeordnete Element (100px) überschreitet = 200px

.innere{
            Flex-Basis: 200px;
            Höhe: 100px;
            Hintergrund: schwarz;
             Flex-Schrumpfen: 0;
        }
        .inner1{
            Flex-Basis: 300px;
            Höhe: 100px;
            Hintergrund: blau;
            Flex-Schrumpfen: 1;
 
        }

Siehe Abbildung unten:

Wenn sowohl A als auch B ihre Breite reduzieren, setzt A den Flex-Shirk auf 3 und B setzt den Flex-Shirk auf 2. Die endgültige Größe von A ist seine eigene Breite (200px) - die reduzierte Breite von A (100px * (200px * 3/(200 * 3 + 300 * 2))) = 150px, und die endgültige Größe von B ist seine eigene Breite (300px) - die reduzierte Breite von B (100px * (300px * 2/(200 * 3 + 300 * 2))) = 250px

.innere{
            Flex-Basis: 200px;
            Höhe: 100px;
            Hintergrund: schwarz;
             Flex-Schrumpfen: 3;
        }
        .inner1{
            Flex-Basis: 300px;
            Höhe: 100px;
            Hintergrund: blau;
            Flex-Schrumpfen: 2;
 
        }

Siehe Abbildung unten:

Hier macht der Editor deutlich, dass flex die Abkürzung für flex-grow, flex-shrink, flex-basis ist (beachten Sie die Reihenfolge der Buchstaben). Folgende Abkürzungsregeln können Sie sich merken:

Wenn der flex -Wert beispielsweise none ist, ist der berechnete Wert 0 0 auto. Die folgenden Werte sind gleichwertig:

.item {flex: keine;}
.Artikel {
    Flex-Wachstum: 0;
    Flex-Schrumpfen: 0;
    Flex-Basis: Auto;
}

Wenn „Flex“ auf „Auto“ gesetzt ist, lautet der berechnete Wert 1 1 auto, was dem Folgenden entspricht:

.item {flex: auto;}
.Artikel {
    Flex-Wachstum: 1;
    Flex-Schrumpf: 1;
    Flex-Basis: Auto;
}

Wenn „flex“ eine nicht negative Zahl ist, ist diese Zahl der Flex-Grow-Wert, „flex-shrink“ ist 1 und „flex-basis“ ist 0 %. Die folgenden Werte sind gleichwertig:

.item {flex: 1;}

.item {flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}

Wenn „Flex“ eine Länge oder ein Prozentsatz ist, wird dies als „Flex-Basiswert“ betrachtet, „Flex-Grow“ ist 1, „Flex-Shrink“ ist 1 und die folgenden Werte sind gleichwertig (beachten Sie, dass 0 % ein Prozentsatz und keine nicht negative Zahl ist):

.item-1 {flex: 0%;}
.item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0%;} 
.item-2 {flex: 24px;} 
.item-2 { flex-grow: 1; flex-shrink: 1; flex-basis: 24px;}

Wenn Flex zwei nicht negative Zahlen annimmt, werden sie als Werte von Flex-Grow bzw. Flex-Shrink betrachtet, und Flex-Basis nimmt 0 % an. Die folgenden sind gleichwertig:

.item {flex: 2 3;} 
.item { flex-grow: 2; flex-shrink: 3; flex-basis: 0%;} 
Wenn Flex eine nicht negative Zahl und eine Länge oder einen Prozentsatz annimmt, werden sie als Werte von Flex-Grow bzw. Flex-Basis behandelt, und Flex-Shrink nimmt 1 an. Folgendes ist gleichwertig: 
.item {flex: 2333 3222px;} 
.item { flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px;}

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der CSS Flexible Box Flex-Grow, Flex-Shrink und Flex-Basis. Weitere verwandte Inhalte zu Flex-Grow, Flex-Shrink und Flex-Basis finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!