Flex-Grow-, Flex-Shrink-, Flex-Basis- und Neun-Raster-Layout verstehen

1. Flex-Grow-, Flex-Shrink- und Flex-Basis-Eigenschaften

Flex-Grow: Definiert, wie der verbleibende Platz aufgeteilt wird. Der Standardwert ist 0, was bedeutet, dass, falls noch Platz vorhanden ist, dieser nicht vergrößert wird.

Flex-Shrink: Definiert das Schrumpfverhältnis des Artikels. Der Standardwert von Flex-Shrink ist 1, und wenn der Wert von Flex-Shrink 0 ist, erfolgt keine Skalierung.

Flex-Basis: Definiert, wie viel Spindelplatz ein Artikel einnimmt. Anhand dieser Eigenschaft berechnet der Browser, wie viel Platz auf der Hauptachse zu viel bzw. zu wenig vorhanden ist. Der Standardwert ist „auto“, was der Originalgröße des Projekts entspricht.
Die Priorität von „Flex-Basis“ ist höher als die der Eigenschaft „Width“. Wenn nur die Eigenschaft „Width“ festgelegt ist und „Flex-Basis“ auf „Auto“ eingestellt ist, entspricht die ursprüngliche Länge des Elements der Breite. Wenn sowohl „Width“ als auch „Flex-Basis“ festgelegt sind, entspricht die ursprüngliche Länge des Elements der „Flex-Basis“.

Beispiel:
HTML Quelltext:

<div Klasse="flex-attr">
    <div Klasse="Artikel-1 rosa">
      <span>1 2 3 4 5 6 7 8 9</span>
    </div>
    <div Klasse="item-2 skyblue">
      <span>1 2 3 4 5 6 7 8 9</span>
    </div>
    <div Klasse="item-3 gray">
      <span>1 2 3 4 5 6 7 8 9</span>
    </div>
</div>

CSS Code:

.flex-attr {
  Rand unten: 600px;
  Breite: 580px;
  Anzeige: Flex;
}
.Artikel-1 {
  Breite: 100px;
  Flex-Wachstum: 1;
  Flex-Schrumpf: 1;
}
.item-2 {
  Breite: 100px;
  Flex-Wachstum: 2;
  Flex-Schrumpf: 2;
}
.item-3 {
  Breite: 200px;
}
.Rosa {
  Hintergrundfarbe: rosa;
}
.himmelblau {
  Hintergrundfarbe: himmelblau;
}
.grau {
  Hintergrundfarbe: grau;
}

Wenn die Breite des übergeordneten Elements div.flex-attr größer ist als die Breite der drei untergeordneten Elemente, wird die Breite der drei untergeordneten Elemente vergrößert. Da das Flex-Grow des dritten untergeordneten Elements standardmäßig 0 ist und nicht vergrößert wird, wird nur die Breite der ersten beiden untergeordneten Elemente vergrößert und das Vergrößerungsverhältnis beträgt 1:2.

In diesem Beispiel wird die Breite des übergeordneten Elements auf 580 Pixel eingestellt. Berechnet wird, dass die Breite des übergeordneten Elements 180 Pixel größer ist als die Breite der drei untergeordneten Elemente. Gemäß dem Vergrößerungsverhältnis wird die Breite von div.item-1 um 180 (1/3) = 60 Pixel vergrößert und die Breite von div.item-2 um 180 (2/3) = 120 Pixel. Daher betragen die endgültigen Breiten der drei untergeordneten Elemente 160 Pixel, 220 Pixel und 200 Pixel, wie in der folgenden Abbildung dargestellt:

Wenn die Breite des übergeordneten Elements div.flex-attr kleiner ist als die Breite der drei untergeordneten Elemente, wird die Breite der drei untergeordneten Elemente verringert. Das Reduzierungsverhältnis beträgt: Breitenverhältnis des untergeordneten Elements * Verhältnis des Flex-Shrink-Attributs. Beispiel: Wenn das Breitenverhältnis der drei Unterelemente 1:1:2 beträgt und das Verhältnis des Flex-Shrink-Attributs 1:2:1 ist (das Standard-Flex-Shrink des dritten Unterelements ist 1), dann beträgt das Verkleinerungsverhältnis 1:2:2.

In diesem Beispiel wird die Breite des übergeordneten Elements auf 320 Pixel eingestellt. Berechnet wird, dass die Breite der drei untergeordneten Elemente 80 Pixel breiter ist als die des übergeordneten Elements. Gemäß dem Reduktionsverhältnis wird die Breite von div.item-1 um 80 (1/5) = 16 Pixel reduziert, und die Breiten von div.item-2 und div.item-3 werden beide um 80 (2/5) = 32 Pixel reduziert . Daher betragen die endgültigen Breiten der drei untergeordneten Elemente 84 Pixel, 68 Pixel und 168 Pixel, wie in der folgenden Abbildung dargestellt:

2. Neun-Raster-Layout

1) Flex verwenden

HTML Quelltext:

<div Klasse="squ-4">
  <div Klasse="squ-inner flex">
     <div Klasse="Artikel">1</div>
     <div Klasse="Artikel">2</div>
     <div Klasse="Artikel">3</div>
     <div Klasse="Artikel">4</div>
     <div Klasse="Artikel">5</div>
     <div Klasse="Artikel">6</div>
     <div Klasse="Artikel">7</div>
     <div Klasse="Artikel">8</div>
     <div Klasse="Artikel">9</div>
  </div>
</div>

CSS Code:

.squ-4 {
  Position: relativ;
  Breite: 100 %;
  Höhe: 0;
  padding-bottom: 100%; /* Der Polsterungsprozentsatz wird relativ zur Breite des übergeordneten Elements berechnet*/
  Rand unten: 30px;
}
.squ-4 .squ-inner {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100%; /* Fülle den Container des übergeordneten Elements, dann sind Breite und Höhe immer gleich*/
}
.squ-4 .squ-inner>div {
  Breite: berechnet (98 % / 3); 
  Höhe: berechnet (98 % / 3);
  Rand rechts: 1 %;
  Marge unten: 1 %;
  Überlauf: versteckt;
}
.squ-4 .flex {
  Anzeige: Flex;
  Flex-Wrap: Umwickeln;
}
.flex>div {
  Flex-Wachstum: 1;
  Hintergrundfarbe: himmelblau;
  Textausrichtung: zentriert;
  Farbe: #fff;
  Schriftgröße: 50px;
  Zeilenhöhe: 2;
}
.flex>div:n-ter-vom-Typ(3n) {
  Rand rechts: 0;
}
.flex>div:n-ter-Typ(n+7) {
  Rand unten: 0;
}

Hierbei ist zu beachten, dass um die Breite und Höhe jedes Rasters gleich zu machen, zwei Schichten übergeordneter Elemente um div.item gewickelt werden. Das äußerste div.squ-4 verwendet Höhe: 0 und Polsterung unten: 100 %. Da der Polsterungsprozentsatz relativ zur Breite des übergeordneten Elements berechnet wird, werden Breite und Höhe des Elements immer gleich, wenn Breite: 100 % und Höhe: 100 % des div.squ-inneren Elements festgelegt werden.

2) Verwenden des Rasters

HTML Quelltext:

<div Klasse="squ-5">
  <div Klasse="squ-inner">
    <div Klasse="Artikel">1</div>
    <div Klasse="Artikel">2</div>
    <div Klasse="Artikel">3</div>
    <div Klasse="Artikel">4</div>
    <div Klasse="Artikel">5</div>
    <div Klasse="Artikel">6</div>
    <div Klasse="Artikel">7</div>
    <div Klasse="Artikel">8</div>
    <div Klasse="Artikel">9</div>
  </div>
</div>

CSS Code:

.squ-5 {
  Position: relativ;
  oben: 0;
  links: 0;
  Höhe: 0;
  Polsterung unten: 100 %;
}
.squ-5 .squ-inner {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100%;
  Anzeige: Raster;
  Raster-Vorlagenspalten: Wiederholung (3, 1fr);
  Raster-Vorlagenzeilen: Wiederholung (3, 1fr);
  Raster-Auto-Flow: Zeile;
}
.squ-5 .item {
  Hintergrundfarbe: rosa;
  Rand: 1px durchgezogen #fff;
}

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.