So steuern Sie den Anteil untergeordneter Flex-Elemente auf der Hauptachse

Hintergrund

Durch das flexible Layout wird eine effektivere Ausrichtung und Platzzuweisung erreicht. Vor kurzem habe ich etwas über die Berechnungsregeln für die Größe von Flex-Child-Elementen gelernt, hauptsächlich über die Berechnungsregeln für flex-grow und flex-shrink .

1. Grundlegende Konzepte

1.1 Hauptachse

Der Startpunkt und die Richtung des Flex-Element-Layouts werden definiert und die untergeordneten Flex-Elemente werden nacheinander auf der Hauptachse platziert.

Die Hauptachse hat vier Richtungen, die durch flex-direction angegeben werden:

• Reihe

Horizontale Richtung, von links nach rechts, Standard

• Reihe umkehren

Horizontale Richtung, von rechts nach links

• Spalte

Vertikale Richtung, von oben nach unten

• Spaltenumkehr

Vertikale Richtung, von unten nach oben

1.2 Hauptachsengröße

Es handelt sich um die Größe des Inhaltsrechtecks ​​des Flex-Containers (ohne Polsterung, Rahmen und Randbereiche) in der Hauptachsenrichtung.

1.3 Querachse

Die Querachse stellt die Richtung der Hammer-Hauptachse dar und dient vor allem der Ausrichtung von Flexelementen.

1.4 Querachsengröße

Es handelt sich um die Größe des Inhaltsrechtecks ​​des Flex-Containers (ohne Polsterung, Rahmen und Randbereiche) in Querachsenrichtung.

1,5 Flexbox-Modell

Ein Element mit flex oder inline-flex eingestellter Anzeige wird auch als Flex-Container bezeichnet.

1. Ein Flex-Container enthält nicht nur Flex-Elemente, sondern auch leeren Raum.

2. CSS beteiligt Flex-Richtung Flex-Wrap Flex-Flow

• Flexrichtung
• Flex-Wrap
• Flex-Flow

Abkürzung für Flex-Direction und Flex-Wrap.

• Inhalt ausrichten

Steuert die Ausrichtung des Flex-Container-Inhalts (Flex-Elemente und Leerraum) entlang der Hauptachse. Achten Sie auf die Unterscheidung zwischen Align-Items.

• Inhalt ausrichten

Steuert die Ausrichtung der Zeilen in einem mehrzeiligen Flex-Container.

• Elemente ausrichten

Steuert die Ausrichtung des Flex-Container-Inhalts (Flex-Elemente und Leerraum) in Querachsenrichtung.

Tipp:

1. Diese CSS-Eigenschaften hängen alle zusammen:

Geben Sie zunächst die Hauptachsenrichtung des Flex-Containers an (Flex-Richtung). Wenn das Flex-Unterelement die Hauptachsengröße überschreitet, muss entschieden werden, ob ein Wrap (Flex-Wrap) erfolgen soll. Wird die Hauptachsengröße nicht überschritten, handelt es sich um eine Inline-Ausrichtung (justify-content). Bei mehreren Zeilen muss jede Zeile zusätzlich direkt ausgerichtet werden (align-content).

2. Es kann leicht passieren, dass man „Justify-Content“, „Align-Content“ und „Align-Items“ verwechselt.

Denken Sie daran, dass sich „Inhalt“ auf die Flex-Elemente und den leeren Bereich bezieht und „Elemente“ sich auf die Flex-Elemente bezieht. Dies ist der Nutzen dieser drei Attribute.

1.6 Flex-Artikel

1. Syntax

Die untergeordneten Elemente der Flexbox enthalten keine Out-of-Flow-untergeordneten Elemente (absolute, feste Elemente), jedoch Float-Elemente.

Angrenzende Ränder von Flex-Unterelementen werden nicht zusammengeführt.

Wenn ein Float-Element als untergeordnetes Flex-Element verwendet wird, ist die Float-Eigenschaft ungültig (da es am Flex-Layout und nicht am Flow-Layout teilnimmt).

2. Einbinden von CSS-Eigenschaften

• Flex-Basis
  

Gibt die Größe des Flex-Containers an, die das Flex-Element in Hauptachsenrichtung einnimmt. Der Standardwert ist „auto“, d. h., die Größe des Flex-Elements wird als die Größe verwendet, die es einnimmt (die Hauptachse ist die Breite des Flex-Elements mit Zeilenwert und die Hauptachse ist die Höhe des Flex-Elements mit Spaltenwert). Ob freier Speicherplatz vorhanden ist, wird anhand dieses Attributs berechnet.

Hinweis: Die von einem Flex-Element eingenommene Größe hängt mit der Flex-Basis zusammen und hat keinen direkten Bezug zur Breite und Höhe des Elements.

• Flexibel wachsen
  

Gibt den elastischen Wachstumsfaktor jedes Flex-Elements an, d. h. den proportionalen Anteil des eingenommenen positiven Freiraums. Ein Wert von 0 (Standard) bedeutet, dass kein leerer Platz belegt ist

• Flex-Schrumpf
  

Gibt den elastischen Schrumpfungsfaktor jedes Flex-Elements an, d. h. den proportionalen Anteil des zugewiesenen negativen Freiraums. Allerdings kann das Element nicht unendlich auf 0 schrumpfen, noch kann es kleiner sein als die Mindestgröße des Elements (wie etwa Mindestbreite oder Mindesthöhe).

• biegen

Flex-Grow Flex-Shrink Flex-Basis Abkürzung

• selbst ausrichten

Passen Sie die Ausrichtung auf der Querachse an. Diese Eigenschaft ist nur gültig, wenn die Querachse nicht vollständig belegt ist.

• Befehl

Geben Sie die Reihenfolge an

2. Berechnung von Freiraum und Flex-Basis

Der Anteil der flexiblen untergeordneten Elemente auf der Hauptachse hängt von diesen drei CSS-Eigenschaften ab:

• Flex-Basis
• Flexibel wachsen
• Flex-Schrumpf

In:
Die Kombination Flex-Basis + Flex-Grow steuert die Erweiterung
Die Kombination „Flex-Basis“ + „Flex-Shrink“ steuert die Schrumpfung. Um also den Anteil der untergeordneten Flex-Elemente auf der Hauptachse zu bestimmen, müssen Sie zuerst bestimmen, welche Kombination verwendet werden soll.

2.1 Regeln

flex-basis gibt die Anfangsgröße des untergeordneten Flex-Elements an, bevor eine Speicherplatzzuweisung erfolgt. Genauer gesagt bezieht sich flex-basis auf die Größe des Boxmodells des untergeordneten Flex-Elements (Box-Sizing), sodass sie der Wertelogik der Breite (Höhe) des untergeordneten Flex-Elements ähnelt. Wenn Box-Sizing=Inhalt ist, umfasst Flex-Basis keine Füll- und Rahmenbereiche.

2.2 Berechnung des verbleibenden freien Speicherplatzes

Freiraumberechnung
Die Größe des Inhaltsrechtecks ​​des Flex-Containers in Hauptachsenrichtung

Bevor der freie Speicherplatz des Flex-Containers berechnet wird, muss zunächst die von den Flex-Unterelementen belegte Größe gezählt werden, um den erwarteten selbstgenutzten Speicherplatz zu ermitteln. Beachten Sie, dass sich dies auf die Größe des Randbereichs der Flex-Unterelemente bezieht und die Ränder benachbarter Flex-Unterelemente nicht zusammengeführt werden.

Berechnung der verbleibenden freien Fläche = Berechnung der freien Fläche - Voraussichtliche Fläche zur Eigennutzung

Positiver Freiraum: Der verbleibende Freiraum mit positiven Werten nutzt die Kombination Flex-Basis + Flex-Grow.

Negativer Freiraum Der verbleibende Freiraum mit negativen und positiven Werten nutzt die Kombination Flex-Basis + Flex-Shrink.

3. Erfahren Sie mehr über Flex-Grow

3.1 Regeln

Wenn ein positiver freier Speicherplatz vorhanden ist, wird flex-basis + flex-grow verwendet, um den Anteil des Flex-Childs auf der Hauptachse zu berechnen. Wenn der positive freie Raum mit einem Kuchen verglichen wird, stellt flex-grow die Menge an Kuchen dar, die Sie erhalten möchten:

• flex-grow: 0.2 bedeutet, dass Sie 20 % des Kuchens abbekommen möchten;
• flex-grow: 1 bedeutet, dass Sie 100 % des ganzen Kuchens haben möchten (etwas zu viel, wenn man die anderen Brüder nicht berücksichtigt);
• flex-grow: 2 bedeutet, dass Sie 200 % des Kuchens abbekommen möchten (das ist ein eklatanter Raub, die Einstellung ist sehr klar).

Aber letztendlich gibt es nur einen Kuchen, und der Flex-Container versucht, die Anforderungen der untergeordneten Flex-Elemente zu erfüllen, indem er den Kuchen auf einfache Weise proportional aufteilt:

• flex-grow der untergeordneten Flex-Elemente wird akkumuliert, um die Gesamtsumme zu erhalten, die als SUM_flex_grow bezeichnet wird.
• Wenn SUM_flex_grow=0, findet kein elastisches Wachstum statt und der Prozess endet;
• Die Größe des Wachstums des untergeordneten Flex-Elements =正自由空間尺寸* flex_grow / Max(SUM_flex_grow, 1) .

3.2 Demo1: Den Kuchen nach Proportionen aufteilen

Funktion demo1() {
    zurückkehren (
        <>
            <div Klassenname="flex">
                <div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10}}>Eins</div>
                <div className="item" style={{flexBasis: 150, flexGrow: 2, }}>Zwei</div>
            </div>
            <Stil jsx>{`
                .flex {
                    Anzeige: Flex;
                    Breite: 600px;
                    Umriss: 1px gestrichelt rot;
                }
                .Artikel {
                    Polsterung: 10px;
                    Rand: 10px durchgezogen #666666;
                }
            `}</style>
        </>
    )
} 

Analyse:

Verbleibenden freien Speicherplatz berechnen

• Hauptachsengröße des Flex-Containers = 600 px
• Gewünschte Größe von Element eins = 100px (Flex-Basis) + 20px (Polsterung links/rechts) + 20px (Rahmen links/rechts) + 10px (Rand rechts) = 150px
• Gewünschte Größe von Element zwei = 150px(Flex-Basis) + 20px(Padding-links/rechts) + 20px(Rand-links/rechts) = 190px
• Verbleibender freier Platz = 600px – 150px – 190px = 260px, d. h. es gibt positiven Restplatz.

Berechnen Sie die Wachstumsgröße jedes Flex-Child-Elements

• SUM_flex_grow = 1 + 2 = 3, was größer als 1 ist. Ein Kuchen reicht nicht zum Teilen, daher kann nur proportional aufgeteilt werden.
• Die tatsächliche Wachstumsgröße von Element eins = 260px * 1 / Max(1, 1 + 2) = 260px * 1 / (1 + 2) = 86,67px
• Die tatsächliche Wachstumsgröße von Element zwei = 260px * 2 / Max(1, 1 + 2) = 260px * 2 / (1 + 2) = 173,33px

3.3 Demo2: SUM(flex-grow) < 1

Funktion demo3() {
    zurückkehren (
        <>
            <div Klassenname="flex">
                <div className="item" style={{flexBasis: 100, flexGrow: 0.2, marginRight: 10}}>Eins</div>
                <div className="item" style={{flexBasis: 150, flexGrow: 0.3, }}>Zwei</div>
            </div>
            <Stil jsx>{`
                .flex {
                    Anzeige: Flex;
                    Breite: 600px;
                    Umriss: 1px gestrichelt rot;
                }
                .Artikel {
                    Polsterung: 10px;
                    Rand: 10px durchgezogen #666666;
                }
            `}</style>
        </>
    )
} 

Analyse:

Verbleibenden freien Speicherplatz berechnen

• Hauptachsengröße des Flex-Containers = 600 px
• Gewünschte Größe von Element eins = 100px (Flex-Basis) + 20px (Polsterung links/rechts) + 20px (Rahmen links/rechts) + 10px (Rand rechts) = 150px
• Gewünschte Größe von Element zwei = 150px(Flex-Basis) + 20px(Padding-links/rechts) + 20px(Rand-links/rechts) = 190px
• Verbleibender freier Platz = 600px – 150px – 190px = 260px, d. h. es gibt positiven Restplatz.

Berechnen Sie die Wachstumsgröße jedes Flex-Child-Elements

• SUM_flex_grow = 0,2 + 0,3 = 0,5, was kleiner als 1 ist. Ein Kuchen kann den Bedarf aller decken und wird direkt an jedes Flex-Unterelement verteilt.
• Die tatsächliche Wachstumsgröße von Element eins = 260px * 0,2 / Max(1, 0,5) = 260px * 0,2 = 52px
• Die tatsächliche Wachstumsgröße von Element zwei = 260px * 0,3 / Max(1, 0,5) = 260px * 0,3 = 78px

Beachten:

Wenn SUM(flex-grow) kleiner als 1 ist, wird der verbleibende Speicherplatz nicht vollständig jedem untergeordneten Flex-Element zugewiesen.

3.3 Demo3 kollidiert mit der maximalen Breite

Beachten Sie in diesem Beispiel:

• Element eins, zwei, drei box-sizing=border-box
• max-width=150px

Funktion demo4() {
    zurückkehren (
        <>
            <div Klassenname="flex">
                <div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10, maxWidth: 150}}>Eins</div>
                <div className="item" style={{flexBasis: 150, flexGrow: 2 }}>Zwei</div>
                <div className="item" style={{flexBasis: 100, flexGrow: 3 }}>Drei</div>
            </div>
            <Stil jsx>{`
                .flex {
                    Anzeige: Flex;
                    Breite: 800px;
                    Umriss: 1px gestrichelt rot;
                }
                .Artikel {
                    Polsterung: 10px;
                    Rand: 10px durchgezogen #666666;
                    Box-Größe: Rahmenbox;
                }
            `}</style>
        </>
    )
} 

Analyse:

Verbleibenden freien Speicherplatz berechnen

Hauptachsengröße des Flex-Containers = 800 px

Gewünschte Größe von Element eins = 100px(Flex-Basis) + 10px(Rand rechts) = 110px
Boxgröße = Rahmenbox

Gewünschte Größe von Element zwei = 150px (Flex-Basis) = 150px
Boxgröße = Rahmenbox

Gewünschte Größe von Element drei = 150px (Flex-Basis) = 150px
Boxgröße = Rahmenbox

Verbleibender freier Platz = 800px – 110px – 150px – 150px = 390px, d. h. es gibt positiven verbleibenden Platz.

Berechnen Sie die Wachstumsgröße jedes Flex-Child-Elements

• SUM_flex_grow = 1 + 2 + 3 = 6, was größer als 1 ist. Ein Kuchen reicht nicht zum Teilen, daher kann nur proportional aufgeteilt werden. .
• Die Wachstumsgröße von Element eins = 390px * 1 / Max(1, 6) = 390px * 1/6 = 65px
  

Auf diese Weise beträgt die Größe von Element eins 100px + 65px = 165px, was größer ist als der durch max-width=150px angegebene Maximalwert, sodass die endgültige Größe von Element eins 150px beträgt. Das heißt, Element eins kann den zugeteilten Kuchen nicht aufessen, also gibt es den nicht aufgegessenen Kuchen zurück und überlässt den anderen Brüdern die Aufgabe, mehr zu bekommen (zuerst stellt sich die Frage: Wie werden diese nicht aufgegessenen Kuchen verteilt?).

Um freien Speicherplatz zu schaffen, werden Element zwei und Element drei neu zugewiesen. Dies bedeutet, dass Sie zu Schritt 1 zurückkehren und die Berechnung neu durchführen müssen.

• Größe der Hauptachse des Flex-Containers = 800 Pixel – Größe des ersten Elements (150 Pixel – 10 Pixel) = 640 Pixel
• Verbleibender Platz = 640px - 150px - 150px = 340px
• SUM_flex_grow = 2 + 3 = 5
• Die Wachstumsgröße von Element zwei = 340px * 2 / Max(1, 5) = 340px * 2 / 5 = 136px
• Die Wachstumsgröße von Element drei = 340px * 3 / Max(1, 5) = 340px * 3 / 5 = 204px

3.4 Zusammenfassung:

• Der erste Schritt besteht immer darin, den verbleibenden freien Speicherplatz zu berechnen.
• Das Wachstum ist ein absoluter Wert, d. h. das Flex-Unterelement wird um einen absoluten Wert vergrößert (das unterscheidet sich von Flex-Shrink).
• Wenn max- Attribut-Konflikt auftritt, wird der Kuchen, den Element 1 nicht aufbrauchen kann, in den Gesamtkuchen eingefügt und auf die nachfolgenden Flex-Child-Elemente neu verteilt.

4. Erfahren Sie mehr über Flex-Shrink

4.1 Regeln

Wenn negativer Freiraum vorhanden ist, wird flex-basis + flex-shrink verwendet, um den Anteil des untergeordneten Flex-Elements auf der Hauptachse zu berechnen. flex-shrink -Wert drückt den Wunsch jedes Flex-Childs aus, einen Beitrag zu leisten:

• flex-shrink: 0.2 bedeutet, dass Sie 20 % des negativen Freiraums teilen möchten.
• flex-shrink: 1 bedeutet, dass Sie 100 % des negativen freien Speicherplatzes teilen möchten (genug für einen Bruder, die anderen Brüder müssen nicht teilen);
• flex-shrink: 2 bedeutet, dass Sie 200 % des negativen Freiraums verteilen möchten (die Verteilungseinstellung ist sehr klar).

Der Flex-Container war zu Tränen gerührt, aber um die Gefühle jedes einzelnen Flex-Unterelements zu berücksichtigen, wurde eine „vernünftigere“ Zuordnungsregel übernommen:

• Berechnen Sie das Produkt aus dem Inhaltsrechteck des untergeordneten Flex-Elements auf der Hauptachse und Flex-Shrink, bezeichnet als A.
• Akkumulieren Sie den Produktwert von Schritt 1, aufgezeichnet als SUM_A;
• Zugeteilter negativer Freiraum valid_negative_free_space = negative_free_space * Min(1, SUM(flex-shrink))
• Der Schrumpfungswert jedes Flex-Elements = valid_negative_free_space * A / SUM_A .

Die Berechnungsregeln sind komplizierter als die oben genannten und es handelt sich nicht um eine einfache Aufteilung des negativen Freiraums. Das Ausmaß der Schrumpfung hängt nicht nur vom Flex-Schrumpf, sondern auch von der Flex-Basis ab. Dies dient lediglich dazu, es „vernünftiger“ zu machen, d. h. unter denselben Flex-Shrink-Bedingungen gilt: Je kleiner die Flex-Basis, desto langsamer schrumpft das Flex-Element (genau wie bei der Zahlung von Steuern: Je höher das Einkommen, desto mehr zahlen Sie).

Hinweis: Wenn die Summe von Flex-Shrink kleiner als 1 ist, bedeutet dies, dass ein Teil des negativen Freiraums verteilt wird (d. h. einige Größen werden nicht verkleinert).

4.2 Demo1: „Die Kluft zwischen Arm und Reich verringern“

Funktion demo5() {
    zurückkehren (
        <>
            <div Klassenname="flex">
                <div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10}}>Eins</div>
                <div className="item" style={{flexBasis: 150, flexGrow: 2, flexShrink: 2 }}>Zwei</div>
            </div>
            <Stil jsx>{`
                .flex {
                    Anzeige: Flex;
                    Breite: 300px;
                    Umriss: 1px gestrichelt rot;
                }
                .Artikel {
                    Polsterung: 10px;
                    Rand: 10px durchgezogen #666666;
                }
            `}</style>
        </>
    )
} 

Analyse (zu lang ist ähnlich dem Flex-Grow-Prozess):

Verbleibenden freien Speicherplatz berechnen

• Hauptachsengröße des Flex-Containers = 300 px
• Gewünschte Größe von Element eins = 100px (Flex-Basis) + 20px (Polsterung links/rechts) + 20px (Rahmen links/rechts) + 10px (Rand rechts) = 150px
• Gewünschte Größe von Element zwei = 150px(Flex-Basis) + 20px(Padding-links/rechts) + 20px(Rand-links/rechts) = 190px
• Verbleibender freier Platz = 300px – 150px – 190px = -40px, d. h. es gibt negativen Restplatz.
• Der negative verbleibende zu verteilende Raum = -40px * Min(1, 1 + 2) = -40px

Berechnen Sie die Schrumpfgröße jedes Flex-Unterelements

• SUM_A = 100px * 1 + 150px * 2 = 400px
• Die tatsächlich verkleinerte Größe von Element 1 = 40px * 100px * 1 / 400px = 10px, d. h. die endgültige Breite = 100px - 10px = 90px
• Die tatsächlich verkleinerte Größe von Element zwei = 40px * 150px * 2 / 400px = 30px, d. h. die endgültige Breite = 150px - 30px = 120px

4.2 Demo: SUM(flex-shrink) < 1

Funktion demo8() {
    zurückkehren (
        <>
            <div Klassenname="flex">
                <div className="item" style={{flexBasis: 100, flexShrink: 0.2, marginRight: 10}}>Eins</div>
                <div className="item" style={{flexBasis: 150, flexShrink: 0.3 }}>Zwei</div>
            </div>
            <Stil jsx>{`
                .flex {
                    Anzeige: Flex;
                    Breite: 300px;
                    Umriss: 1px gestrichelt rot;
                }
                .Artikel {
                    Polsterung: 10px;
                    Rand: 10px durchgezogen #666666;
                }
            `}</style>
        </>
    )
} 

Das Flexelement erstreckt sich über den Flexcontainer hinaus.

Analyse:

Verbleibenden freien Speicherplatz berechnen

• Hauptachsengröße des Flex-Containers = 300 px
• Gewünschte Größe von Element eins = 100px (Flex-Basis) + 20px (Polsterung links/rechts) + 20px (Rahmen links/rechts) + 10px (Rand rechts) = 150px
• Gewünschte Größe von Element zwei = 150px(Flex-Basis) + 20px(Padding-links/rechts) + 20px(Rand-links/rechts) = 190px
• Verbleibender freier Platz = 300px – 150px – 190px = -40px, d. h. es gibt negativen Restplatz.
• Effektiver negativer verbleibender Raum = -40px * Min(1, 0,2 + 0,3) = -40px * 0,5 = -20px

Berechnen Sie die Schrumpfgröße jedes Flex-Unterelements

• SUM_A = 100px * 0,2 + 150px * 0,3 = 65px
• Die tatsächlich verkleinerte Größe von Element 1 = 20px * 100px * 0,2 / 65px = 6,15px, d. h. die endgültige Breite = 100px - 6,15px = 93,85px
• Die tatsächlich verkleinerte Größe von Element zwei = 20px * 150px * 0,3 / 65px = 13,85px, d. h. die endgültige Breite = 150px - 13,85px = 136,15px

4.4 Demo3: Boxgröße = Rahmenbox

Hinweis: Element eins, zwei box-sizing= border-box

Funktion demo6() {
    zurückkehren (
        <>
            <div Klassenname="flex">
                <div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10}}>Eins</div>
                <div className="item" style={{flexBasis: 150, flexGrow: 2, flexShrink: 2 }}>Zwei</div>
            </div>
            <Stil jsx>{`
                .flex {
                    Anzeige: Flex;
                    Breite: 200px;
                    Umriss: 1px gestrichelt rot;
                }
                .Artikel {
                    Polsterung: 10px;
                    Rand: 10px durchgezogen #666666;
                    Box-Größe: Rahmenbox;
                }
            `}</style>
        </>
    )
} 

Analyse:

Verbleibenden freien Speicherplatz berechnen

• Hauptachsengröße des Flex-Containers = 200 px
• Gewünschte Größe von Element eins = 100px(Flex-Basis) + 10px(Rand rechts) = 110px
• Gewünschte Größe von Element zwei = 150px (Flex-Basis) = 150px
• Verbleibender freier Platz = 200px – 110px – 150px = -60px, d. h. es gibt negativen Restplatz.
• Der negative verbleibende zu verteilende Raum = -60px * Min(1, 1 + 2) = -60px

Berechnen Sie die Schrumpfgröße jedes Flex-Unterelements

• SUM_A = 60px * 1 + 110px * 2 = 280px
• Hinweis: Derzeit wird Flex-Basis nicht direkt mit Flex-Shrink multipliziert. Im Wesentlichen wird die Breite des Inhaltsrechtecks ​​des untergeordneten Flex-Elements mit Flex-Shrink multipliziert.
• Die tatsächliche kontrahierte Größe von Element 1 = 60px * 60px * 1 / 280px = 12,86px, d. h. die endgültige Breite = 60px - 12,86px = 47,14px (ohne Polsterung und Rahmen)
• Die tatsächliche Wachstumsgröße von Element zwei = 60px * 110px * 2 / 280px = 47,14px, d. h. die endgültige Breite = 110px - 47,14px = 62,86px (ohne Polsterung und Rahmen)

4.5 Demo5 steht im Konflikt mit der Mindestbreite

Beachten Sie in diesem Beispiel:

Element eins hat min-width=60px

Funktion demo7() {
    zurückkehren (
        <>
            <div Klassenname="flex">
                <div className="item" style={{flexBasis: 100, flexShrink: 2, marginRight: 10, minWidth: 60}}>Eins</div>
                <div className="item" style={{flexBasis: 150, flexShrink: 2 }}>Zwei</div>
                <div className="item" style={{flexBasis: 100, flexShrink: 1 }}>Drei</div>
            </div>
            <Stil jsx>{`
                .flex {
                    Anzeige: Flex;
                    Breite: 300px;
                    Umriss: 1px gestrichelt rot;
                }
                .Artikel {
                    Polsterung: 10px;
                    Rand: 10px durchgezogen #666666;
                }
            `}</style>
        </>
    )
}

Analyse:

Verbleibenden freien Speicherplatz berechnen

• Hauptachsengröße des Flex-Containers = 300 px
• Gewünschte Größe von Element eins = 100px (Flex-Basis) + 20px (Polsterung links/rechts) + 20px (Rahmen links/rechts) + 10px (Rand rechts) = 150px
• Die gewünschte Größe von Element zwei = 150px (Flex-Basis) + 20px (Padding-links/rechts) + 20px (Border-links/rechts) = 190px
• Die gewünschte Größe von Element drei = 100px (Flex-Basis) + 20px (Padding-links/rechts) + 20px (Border-links/rechts) = 140px
• Verbleibender freier Platz = 300px – 150px – 190px – 140px = -180px, d. h. es gibt negativen Restplatz.
• Der negative verbleibende zu verteilende Raum = -180px * Min(1, 1 + 2 + 2) = -180px

Berechnen Sie die Schrumpfgröße jedes Flex-Unterelements

• SUM_A = 100px * 2 + 150px * 2 + 100px * 1 = 400px
• Die tatsächliche verkleinerte Größe von Element eins = 180px (der absolute Wert des negativen verbleibenden Raums) 100px 2 / 700px = 51,43px,
• Auf diese Weise beträgt die Größe von Element eins höchstens 100px – 51,43px = 48,57px, was weniger als seine Mindestbreite von 60px ist, d. h. die endgültige Breite beträgt 60px. Das heißt, die dem Element 1 zugewiesene Steuerlast muss von den anderen Brüdern geteilt werden.

Um freien Speicherplatz zu schaffen, werden Element zwei und Element drei neu zugewiesen. Dies bedeutet, dass Sie zu Schritt 1 zurückkehren und die Berechnung neu durchführen müssen.

• Größe der Hauptachse des Flex-Containers = 300px – Größe, die von Element eins eingenommen wird (60px + 20px + 20px + 10px) = 190px
• Verbleibender Platz = 190px - 190px - 140px = -140px, d.h. die Elemente zwei und drei müssen insgesamt um 140px verkleinert werden.
• SUM_A = 150px * 2 + 100px * 1 = 400px
• Die verkleinerte Größe des zweiten Elements = 140px * 150 * 2 / 400px = 105px, d. h. die endgültige Breite = 150px - 105px = 45px
• Die verkleinerte Größe des dritten Elements = 140px * 100 / 400px = 35px, d. h. die endgültige Breite = 100px - 35px = 65px

4.6 Zusammenfassung

• Die Schrumpfungsregeln sind etwas komplizierter, und dafür gibt es Gründe. Hauptsächlich soll verhindert werden, dass kleine Elemente zu schnell schrumpfen und negative Breiten annehmen.
• Wenn ein Flex-Element elastisch ausgedehnt oder zusammengezogen wird, wird nur das Inhaltsrechteck elastisch ausgedehnt oder zusammengezogen. Seine Ränder, Rahmen und Polsterung werden nicht elastisch ausgedehnt oder zusammengezogen und sind daher nicht in der Berechnungsformel für die elastische Ausdehnung enthalten (wie etwa in der Formel für die elastische Kontraktion).
• Wenn ein Konflikt mit den Mindesteigenschaften auftritt, das heißt, wenn das Element nicht mehr verkleinert werden kann, wird der verbleibende Platz durch die folgenden untergeordneten Flex-Elemente neu verteilt. Außer wenn ein Min-Attribut eine Mindestgröße angibt, hat jedes Element eine Mindestgröße.

siehe

css-tricks: Eine vollständige Anleitung zu Flexbox
Spezifikation
Flexbox verstehen

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.