Eine kurze Diskussion über Flex-Layout und Skalierungsberechnung

1. Einführung in Flex Layout

Flex ist die Abkürzung für Flexible Box, was „flexibles Layout“ bedeutet und verwendet wird, um dem Boxmodell maximale Flexibilität zu verleihen.

Jeder beliebige Container kann als Flex-Layout spezifiziert werden, das heißt auch Inline-Elemente können auf ein Flex-Layout eingestellt werden.

// Setze das Block-Level-Element div auf Flex-Layout div {
    Anzeige: Flex;
}

// Setze den Span des Inline-Elements auf den Span des Flex-Layouts {
    Anzeige: Flex;
}

Elemente, die das Flex-Layout verwenden, werden Flex-Container oder kurz „Container“ genannt. Alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, sogenannten Flex-Elementen oder kurz „Elementen“.

2. Standardmerkmale des Flex-Layouts

Standardmäßig werden alle untergeordneten Elemente im Container horizontal angeordnet, ähnlich dem Erzwingen eines linken Floats. Daher sind die Float- und Clear-Eigenschaften der untergeordneten Elemente des Containers ungültig. Gleichzeitig wird die Ausrichtung der untergeordneten Elemente im Container nicht durch die vertikale Ausrichtung gesteuert, d. h. die vertikale Ausrichtung ist ebenfalls ungültig.

<Stil>
#hauptsächlich{
    Breite: 800px;
    Höhe: 300px;
    Anzeige: Flex;
    Schriftgröße: 20px;
    Hintergrund: rot;
}
</Stil>

<div id="Haupt">
  <div style="background-color:coral;" class="item-1">Rot</div>
  <div style="background-color:lightblue;" class="item-2">Blau</div>  
  <div style="background-color:lightgreen;" class="item-3">Grün mit mehr Inhalt</div>
</div>

① Wenn die vertikale Ausrichtung des Containers nicht festgelegt ist und die Höhe der Unterelemente des Containers nicht festgelegt ist, entspricht die Höhe der Unterelemente des Containers der Höhe des Containers. Wie oben gezeigt beträgt die Höhe aller Unterelemente im Container 300 Pixel.

② Standardmäßig wird die Breite der Unterelemente unter dem Container nicht automatisch vergrößert, d. h. standardmäßig wird sie mit der tatsächlichen Breite des Elements selbst angezeigt. Wie in der Abbildung gezeigt:

③ Standardmäßig kann die Breite der Unterelemente unter dem Container reduziert werden. Wenn die Summe der Breiten aller Unterelemente im Container die Breite des Containers überschreitet, werden sie standardmäßig nicht umbrochen. In diesem Fall müssen Sie die Breite der Unterelemente des Containers reduzieren, um sicherzustellen, dass der Container alle Unterelemente aufnehmen kann. Allerdings lässt sich die Breite des Container-Child-Elements nicht unendlich, also nicht weiter verringern.

.Artikel-1 {
    Breite: 200px;
}
.item-2 {
    Breite: 8800px;
}
.item-3 {
    Breite: 8800px;
}

Beispielsweise ist oben die Breite von item2 und item3 auf 8800px eingestellt und die Gesamtbreite aller untergeordneten Elemente im Container beträgt 17800px, was die Breite des Containers von 800px bei weitem übersteigt. Daher müssen alle untergeordneten Elemente im Container proportional komprimiert werden. Die Breite des Elements item1 sollte 200 - 191,01 = 8,99px betragen und item1 wird auf die Mindestbreite komprimiert, die zum Speichern eines Wortes erforderlich ist. Diese entspricht genau der Schriftgröße, also 20px. Daher beträgt die Breite von item1 20px.

④ Standardmäßig können die Unterelemente im Container auf ein Minimum komprimiert werden. Wenn jedoch nach der Komprimierung auf ein Minimum nicht alle Unterelemente platziert werden können, werden die Unterelemente außerhalb des Containers platziert.

⑤ Wenn Sie dem Container eine vertikale Ausrichtung hinzufügen, wird die Höhe aller untergeordneten Elemente im Container zur tatsächlichen Höhe und entspricht nicht der Höhe des Containers.

#hauptsächlich{
    Breite: 800px;
    Höhe: 300px;
    Anzeige: Flex;
    Schriftgröße: 20px;
    Hintergrund: rot;
    align-items: flex-start;/*Vertikale Ausrichtung hinzufügen*/
} 

3. Container-Eigenschaftseinstellungen

Standardmäßig hat ein Container zwei Achsen: die horizontale Hauptachse und die vertikale Querachse. Die Hauptsache besteht darin, die Hauptachsenrichtung des Containers festzulegen und festzulegen, ob nach dem Überschreiten des Containers ein Umbruch erfolgen soll sowie die horizontale und vertikale Ausrichtung.

① Flex-Richtung: Wird verwendet, um die Richtung der Hauptachse festzulegen. Der Standardwert ist Zeile, was bedeutet, dass alle Unterelemente im Container horizontal angeordnet sind.

Spalte: Gibt an, dass alle untergeordneten Elemente im Container vertikal angeordnet sind.

Zeilenumkehr: bedeutet, die Reihenfolge aller untergeordneten Elemente im Container umzukehren und den Startpunkt rechts, also rechtsbündig, zu platzieren.

Spaltenumkehr: bedeutet, die Reihenfolge aller untergeordneten Elemente im Container umzukehren und den Startpunkt unten zu wählen, also am unteren Rand des Containers auszurichten.

② Flex-Wrap: Wird verwendet, um festzulegen, ob ein Umbruch erfolgen soll, wenn die untergeordneten Elemente nicht in den Container passen. Der Standardwert ist „nowrap“, was bedeutet, dass kein Zeilenumbruch erfolgt, auch wenn der Text nicht hineinpasst.

wrap: Gibt an, dass Zeilen umbrochen werden können. Bei der Einstellung „wrap“ werden die Elemente im Container nicht komprimiert, sondern umbrochen angezeigt.

#hauptsächlich {
    Breite: 800px;
    Höhe: 300px;
    Anzeige: Flex;
    Hintergrund: rot;
    flex-wrap: wrap; /*Umbrechen, wenn kein Leerzeichen vorhanden ist*/
    Schriftgröße: 20px;
}
.Artikel-1 {
    Breite: 300px;
}
.item-2 {
    Breite: 300px;
}
.item-3 {
    Breite: 300px;
} 

Wrap-Reverse: Gibt an, dass die Zeilenreihenfolge nach dem Zeilenumbruch umgekehrt wird.

wickeln:

Umschlag-Rückseite:

③ Flex-Flow: Dies ist eine Abkürzung für das Flex-Direction-Attribut und das Flex-Wrap-Attribut. Der Standardwert ist Row Nowrap, dh die Hauptachse ist horizontal und es gibt keinen Zeilenumbruch.

④ Inhalt ausrichten: Wird verwendet, um die Ausrichtung der Hauptachsenrichtung festzulegen.

⑤ align-items: wird verwendet, um die Ausrichtung von Elementen auf der Querachse (nicht der Hauptachse) festzulegen.

4. Festlegen der Attribute von Elementen (Artikeln) in Containern

① Reihenfolge: Wird verwendet, um die Anordnungsreihenfolge der Containerelemente festzulegen. Der Standardwert ist 0. Je kleiner der Wert, desto höher die Anordnung.

.item-2 {
    Reihenfolge: -1; /*Setzt die Reihenfolge von Element 2 auf -1, um Element 2 nach vorne zu setzen*/
} 

② Flex-Grow: Wird verwendet, um das Vergrößerungsverhältnis des Containerelements festzulegen. Der Standardwert ist 0, d. h. wenn noch Platz vorhanden ist, wird es nicht vergrößert.

③ Flex-Shrink: Wird verwendet, um das Schrumpfungsverhältnis des Containerelements festzulegen. Der Standardwert ist 1, was bedeutet, dass das Element schrumpft, wenn nicht genügend Platz vorhanden ist.

④ Flex-Basis: Wird verwendet, um die Größe des Containerelements festzulegen. Der Standardwert ist auto, was der tatsächlichen Größe des Containerelements entspricht. Beim Skalieren wird dieser Wert verwendet, um zu berechnen, ob zusätzlicher Skalierungsraum vorhanden ist.

⑤ flex: Dies ist die Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Der Standardwert ist 0 1 auto, was bedeutet, dass es nicht vergrößert, aber verkleinert werden kann und die Größe mit der Größe des Containerelements übereinstimmt. Die letzten beiden Attribute sind optional.

.item-2 {
    flex: 0 1 auto;/*Beachten Sie, dass zwischen den drei Werten ein Leerzeichen und kein Komma steht*/
}

⑥ align-self: Wird verwendet, um die Ausrichtung eines Containerelements individuell festzulegen. Der Standardwert ist auto, was bedeutet, dass die Ausrichtung des übergeordneten Elements übernommen wird.

.item-2 {
    align-self: center;/*Element 2 auf zentrierte Ausrichtung setzen*/
} 

5. Der Unterschied zwischen flex:1 und flex: auto

Aus dem Obigen können wir erkennen, dass der Standardwert von Flex 0 1 auto ist. Der Wert von „Flex“ ist relativ flexibel und kann auf viele Werte eingestellt werden, beispielsweise:
① Keine: Zu diesem Zeitpunkt ist es gleich 0 0 auto.

.Artikel {
    flex: keine; // Wert ist keiner
}
// Entspricht .item {
    Flex-Wachstum: 0;
    Flex-Schrumpfen: 0;
    Flex-Basis: Auto;
}

② auto: Zu diesem Zeitpunkt ist es gleich 1 1 auto.

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

③ Eine nicht negative Zahl: In diesem Fall bezieht sich diese nicht negative Zahl auf den Wert von Flex-Grow, Flex-Shrink verwendet den Standardwert 1, aber der Flex-Basiswert beträgt 0 %, beispielsweise:

.Artikel {
    flex: 1; // der Wert ist eine nicht negative Zahl}
// Entspricht .item {
    Flex-Wachstum: 1;
    Flex-Schrumpf: 1;
    flex-basis: 0 %; /*Das ist etwas Besonderes, 0 %*/
}

④ Die Werte sind zwei nicht negative Zahlen: Sie stellen die Werte von Flex-Grow bzw. Flex-Shrink dar und der Wert von Flex-Basis beträgt 0 %.

.Artikel {
    flex: 6 8; // Der Wert besteht aus zwei nicht negativen Zahlen}
// Entspricht .item {
    Flexibel wachsen: 6;
    Flex-Schrumpf: 8;
    flex-basis: 0 %; /*Das ist etwas Besonderes, 0 %*/
}

⑤ Eine Länge oder ein Prozentsatz: In diesem Fall ist dieser Wert der Wert von Flex-Basis, Flex-Grow ist 1 und Flex-Shrink ist 1

.Artikel {
    flex: 200px; // Wert ist ein Pixelwert}
// Entspricht .item {
    Flex-Wachstum: 1;
    Flex-Schrumpf: 1;
    Flex-Basis: 200px;
}

.Artikel {
    flex: 100%; // Der Wert ist ein Prozentsatz}
// Entspricht .item {
    Flex-Wachstum: 1;
    Flex-Schrumpf: 1;
    Flex-Basis: 100%;
}

Es ist zu beachten, dass, wenn „Flex-Basis“ auf einen Prozentsatz eingestellt ist, dieser sich auf den Prozentsatz der Containergröße bezieht und nicht auf den Prozentsatz seiner eigenen Größe.

Wie aus dem Obigen ersichtlich ist, ist der Flex-Basiswert „auto“, wenn der Flex-Wert „none“ oder „auto“ ist oder nicht festgelegt ist; in anderen Fällen, z. B. wenn der Flex-Wert eine Zahl ist, ist der Flex-Basiswert 0 %.

Der Unterschied zwischen flex:1 und flex:auto besteht also darin, dass der Wert von flex-basis unterschiedlich ist. Bei flex:1 ist der Wert von flex-basis 0 %; bei flex:auto ist der Wert von flex-basis auto.

6. Berechnung des Vergrößerungs- bzw. Verkleinerungswertes von Containerelementen

① Bei der Vergrößerung geht es hauptsächlich darum, basierend auf dem Wert von Flex-Basis zu berechnen, ob im Container noch Platz übrig ist. Wenn noch Platz übrig ist und ein untergeordnetes Element im Container vergrößert werden kann, wird der Vergrößerungskoeffizient des untergeordneten Containerelements berechnet, indem der Flex-Grow-Wert des untergeordneten Elements durch die Summe der Flex-Grow-Werte aller untergeordneten Elemente im Container geteilt und dann mit der Größe des verbleibenden Platzes multipliziert wird. Dies ist der Pixelwert, um den das untergeordnete Containerelement vergrößert werden muss.

#hauptsächlich{
    Breite: 800px;
    Höhe: 300px;
    Anzeige: Flex;
    Hintergrund: rot;
    Schriftgröße: 20px;
}
.Artikel-1 {
    Breite: 200px;
    Flex: 2 1 automatisch;
}
.item-2 {
    Breite: 200px;
    flex: 3 1 10%;/*Der Flex-Basiswert entspricht hier 80px*/
}
.item-3 {
    Breite: 100px;
    flexibel: 0 1 220px;
}

Die Flex-Basis von itme-1 ist auto, daher ist der Wert derselbe wie beim Element selbst, nämlich 200px;
Die Flex-Basis von Element 2 beträgt 10 %, was sich auf die Größe des Containers selbst bezieht, d. h. 800 px * 10 % = 80 px;
Die Flex-Basis von Element 3 ist auf 220 Pixel eingestellt. Dabei ist zu beachten, dass die Breite zwar auf 100 Pixel eingestellt ist, diese jedoch keine Auswirkung hat und weiterhin auf der Flex-Basis basiert.
Zunächst wird gemäß Flex-Basis der verbleibende Platz berechnet = 800px - (200px + 80px + 220px) = 300px;
Da der verbleibende Platz 300px > 0 ist, können die untergeordneten Elemente im Container vergrößert werden. Da der Flex-Grow-Wert von item-3 0 ist, wird item-3 nicht vergrößert und weiterhin mit 220px angezeigt.
Zoomwert von Element 1 = 2 / (2 + 3) * 300px = 120px;
Zoomwert von Element 2 = 3 / (2 + 3) * 300px = 180px;
Die endgültige Größe von Element 1 beträgt also 200 Pixel + 120 Pixel = 320 Pixel.
Größe von Element 2 = 80px + 180px = 260px;
Größe von Element 3 = 220px;

② Beim Verkleinern wird der Platz, den der Container über den Container hinaus hat, ebenfalls auf Grundlage des Flex-Basis-Werts berechnet. Das Skalierungsverhältnis wird jedoch nicht einfach auf Grundlage des Flex-Shrink-Werts berechnet. Stattdessen wird das Skalierungsverhältnis auf Grundlage des Flex-Basis-Werts eines Elements im Container multipliziert mit dem Flex-Shrink-Wert und der Summe des Flex-Basis-Werts aller untergeordneten Elemente im Container multipliziert mit dem Flex-Shrink-Wert berechnet.

#hauptsächlich{
    Breite: 800px;
    Höhe: 300px;
    Anzeige: Flex;
    Hintergrund: rot;
    Schriftgröße: 20px;
}
.Artikel-1 {
    Breite: 200px;
    flex: 0 2 auto;
}
.item-2 {
    Breite: 200px;
    flex: 0 3 100%;/*Der Flex-Basiswert entspricht hier 800px*/
}
.item-3 {
    Breite: 100px;
    flexibel: 0 0 200px;
}

Die Flex-Basis von itme-1 ist auto, daher ist der Wert derselbe wie beim Element selbst, nämlich 200px;
Die Flex-Basis von Element 2 beträgt 100 %, was sich auf die Größe des Containers selbst bezieht, d. h. 800 px * 100 % = 800 px;
Die Flex-Basis von Element 3 ist auf 200 Pixel eingestellt. Dabei ist zu beachten, dass die Breite, obwohl sie auf 100 Pixel eingestellt ist, keine Auswirkung hat und weiterhin auf der Flex-Basis basiert.
Zunächst wird gemäß Flex-Basis der überschüssige Platz berechnet = (200px + 800px + 200px) – 800px = 400px;
Da der überschüssige Platz 400px > 0 ist, müssen die untergeordneten Elemente im Container verkleinert werden. Da der Flex-Shrink-Wert von item-3 0 ist, wird item-3 nicht verkleinert und weiterhin mit 200px angezeigt.
Reduzierter Wert von Element 1 = ( 2.200px / ( 2.200px + 3.800px + 0.200px)) * 400px = 57,14px;
Der reduzierte Wert von Element 2 = ( 3.800px / ( 2.200px + 3.800px + 0.200px)) * 400px = 342,86px;
Die endgültige Größe von Element 1 beträgt also 200 Pixel – 57,14 Pixel = 142,86 Pixel.
Größe von Element 2 = 800px – 342,86px = 457,14px;
Größe von Element 3 = 200px;

Dies ist das Ende dieses Artikels über Flex-Layout und Skalierungsverhältnisberechnung. Weitere relevante Inhalte zu Flex-Layout und Skalierungsverhältnis finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!