Detaillierte Erklärung des Grid-Layouts und des Flex-Layouts der Anzeige in CSS3

Das Gitterlayout weist einige Ähnlichkeiten mit dem Flex-Layout auf, da beide die internen Elemente des Containers unterteilen.

• Das Flex-Layout ist ein Achsenlayout, das nur die Position von Elementen auf der Achse angeben kann und als eindimensionales Layout betrachtet werden kann.
• Das Rasterlayout unterteilt den Container in Zeilen und Spalten, um Zellen zu generieren, und gibt dann die Zellen an, in denen sich die Elemente befinden. Es kann als zweidimensionales Layout betrachtet werden.
• Das übergeordnete Element wird zum Container , und die mehreren untergeordneten Elemente innerhalb des übergeordneten Elements werden zu Elementen.

Flex flexibles Layout (Containerattribut)

Flex ist die Abkürzung für Flexible Box (abgekürzt: elastische Box), jeder Container kann auf Flex-Layout eingestellt werden.

Flex wird als Container (Felx-Container) bezeichnet und alle untergeordneten Elemente werden automatisch zu Mitgliedern des Containers.

1. flex-direction bestimmt die Richtung der Hauptachse (also die Richtung, in der die Elemente angeordnet sind)
2. Flex-Wrap
3. Flex-Flow
4. Inhalt ausrichten
5. Elemente ausrichten
6. Inhalt ausrichten

Flex-Direction-Attribut: bestimmt die Richtung der Hauptachse (also die Richtung, in der die Elemente angeordnet sind)

• Zeile (Standard): Die Hauptachse ist horizontal, mit dem Startpunkt am linken Ende;

.Inhaltsbox {
       Anzeige: Flex;
       Flex-Richtung: Reihe;
   } 

Reihenumkehr: Die Hauptachse ist horizontal, mit dem Startpunkt am rechten Ende;

.Inhaltsbox {
       Anzeige: Flex;
       Flex-Richtung: Reihe;
   } 

Säule: Die vertikale Richtung der Hauptachse, beginnend an der Oberkante;

.Inhaltsbox {
       Anzeige: Flex;
       Flex-Richtung: Spalte;
   } 

column-reserve: Die Hauptachse ist vertikal, mit dem Startpunkt an der Unterkante.

.Inhaltsbox {
       Anzeige: Flex;
       Flex-Richtung:Spalte umkehren;
   } 

Flex-Wrap-Attribut: Zeilenumbrüche definieren

Standardmäßig sind sie alle auf einer Achse ausgerichtet. Die Definition des Flex-Wrap-Attributs besagt, dass, wenn eine Achse nicht passt, das entsprechende Attribut zum Umbrechen der Linie verwendet wird.

nowrap (Standard): kein Zeilenumbruch.

.Inhaltsbox {
       Anzeige: Flex;
      Flex-Wrap: Nowrap;
   } 

Wrap: Wrap, mit der ersten Zeile oben.

.Inhaltsbox 
{       
Anzeige: Flex;      
Flex-Wrap: Umwickeln;   
}

Wrap-Reverse: Zeilen umbrechen, mit der ersten Zeile unten.

  .Inhaltsbox 
{    
Anzeige: Flex;   
Flex-Wrap: Wrap-Rückseite;  
}

Flex-Flow-Attribut: Abkürzung für Flex-Direction und Flex-Wrap, Standardzeilen-Nowrap

Die Eigenschaft „Flex-Flow“ ist eine Kurzform der Eigenschaften „Flex-Direction“ und „Flex-Wrap“. Der Standardwert lautet „Row Nowrap“.

.Inhaltsbox
 {   
  Flex-Flow: <Flex-Richtung> || <Flex-Wrap>;
}

Eigenschaft „justify-content“: Definiert, wie Elemente auf der Hauptachse ausgerichtet werden.

Die Eigenschaft „justify-content“ definiert die Ausrichtung auf der Hauptachse.

Flex-Start (Standard): linksbündig.

 .Inhaltsbox {
       Anzeige: Flex;
       Inhalt ausrichten: Flex-Start;
   }

Flex-Ende: rechtsbündig.

.Inhaltsbox {
       Anzeige: Flex;
       Inhalt ausrichten: Flex-Ende;
   }

Mitte: Zentrierte Ausrichtung.

.Inhaltsbox {
       Anzeige: Flex;
       Inhalt ausrichten: zentriert;
   }

Abstand zwischen: Richten Sie beide Enden aus und lassen Sie zwischen den Elementen den gleichen Abstand.

 .Inhaltsbox {
       Anzeige: Flex;
       Inhalt ausrichten: Abstand dazwischen;
   }

space-around: Gleicher Abstand auf beiden Seiten, der Abstand auf beiden Seiten jedes Elements ist gleich und der Abstand zwischen den Elementen ist doppelt so groß wie der Abstand zwischen Elementen und Rändern.

 .Inhaltsbox {
       Anzeige: Flex;
       Inhalt ausrichten: Abstand herum;
   }

space-evenly: Der Abstand zwischen den Elementen ist gleich.

Eigenschaft: Definiert die Ausrichtung auf der Querachse

Strecken (Standard): Wenn für das Element keine Höhe festgelegt ist oder die Höhe auf „Automatisch“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein.

  .Inhaltsbox {
       Anzeige: Flex;
       Elemente ausrichten: strecken;
   }

Flex-Start: Am Startpunkt ausrichten.

 .Inhaltsbox {
       Anzeige: Flex;
       Elemente ausrichten: Flex-Start;
   }

Flex-Ende: Endpunkt ausrichten.

 .Inhaltsbox {
       Anzeige: Flex;
       Elemente ausrichten: Flex-Ende;
   }

Mitte: Ausrichtung am Mittelpunkt.

 .Inhaltsbox {
       Anzeige: Flex;
       Elemente ausrichten: zentrieren;
   }

Grundlinie: Die Grundlinienausrichtung der ersten Textzeile im Projekt.

 .Inhaltsbox {
       Anzeige: Flex;
       Elemente ausrichten: Grundlinie;
   }

align-content-Attribut: definiert die Ausrichtung mehrerer Achsen

Wenn das Projekt nur eine Achse hat, hat diese Eigenschaft keine Auswirkung. Daher muss Flex-Wrap in den Eigenschaften festgelegt werden.

stretch: (Standardwert) die Achse nimmt die gesamte Querachse ein

  .Inhaltsbox {
       Anzeige: Flex;
       Flex-Wrap: Umwickeln;
       Inhalt ausrichten: strecken;
   }

flex-start: Richten Sie den Startpunkt mit dem Startpunkt der Querachse aus

.Inhaltsbox {
       Anzeige: Flex;
       Flex-Wrap: Umwickeln;
       Inhalt ausrichten: Flex-Start;
   }

Flex-Ende: Endpunktausrichtung, ausgerichtet auf den Endpunkt der Querachse

 .Inhaltsbox {
       Anzeige: Flex;
       Flex-Wrap: Umwickeln;
       Inhalt ausrichten: Flex-Ende;
   }

Mitte: Mittelpunktausrichtung, ausgerichtet auf den Mittelpunkt der Querachse

   .Inhaltsbox {
       Anzeige: Flex;
       Flex-Wrap: Umwickeln;
       Inhalt ausrichten: zentriert;
   }

space-between: Die Achsen sind gleichmäßig verteilt, auf die Enden der Querachse ausgerichtet und die Abstände zwischen den Achsen sind gleichmäßig verteilt

   .Inhaltsbox {
       Anzeige: Flex;
       Flex-Wrap: Umwickeln;
       Inhalt ausrichten: Abstand dazwischen;
   }

space-around: Der Abstand auf beiden Seiten der Achse ist gleich, und der Abstand auf beiden Seiten jeder Achse ist gleich, d. h. der Abstand zwischen den Achsen ist doppelt so groß wie der Abstand zwischen der Achse und dem Rand

  .Inhaltsbox {
       Anzeige: Flex;
       Flex-Wrap: Umwickeln;
       Inhalt ausrichten: Abstand herum;
   }

Flexibles Layout (Projektattribute)

Reihenfolgeattribut: Definiert die Reihenfolge, in der die Elemente angeordnet werden.

Je kleiner der Wert, desto höher die Rangfolge. Der Standardwert ist 0 und kann negativ sein.

  .box:n-tes-Kind(2) {
       Bestellung:-2
   }
   .box:n-tes-Kind(3) {
       Bestellung:-3
   }
   .box:n-tes-Kind(4) {
       Bestellung:4
   }
   .box:n-tes-Kind(5) {
       Bestellung:5
   }
   .box:n-tes-Kind(6) {
       Bestellung:6
   }

Flex-Grow-Attribut: definiert den Vergrößerungsfaktor des Elements

Der Standardwert ist 0, was bedeutet, dass zusätzlicher Platz nicht vergrößert wird, falls vorhanden. Kann eine Dezimalzahl sein, die den verbleibenden Platz proportional einnimmt.

Wenn alle Elemente den gleichen Flex-Grow-Wert haben, wird der verbleibende Platz gleichmäßig aufgeteilt.

 .Kasten {
       Flexibel wachsen: 5;
   }

Wenn ein Element einen Flex-Grow von 2 und die anderen einen Flex-Grow von 1 haben, dann ist der verbleibende Speicherplatz, den dieses Element einnimmt, doppelt so groß wie der der anderen.

  .box:n-tes-Kind(3) {
       Flexibel wachsen: 8;
   }

Beispiele:

 .Kasten {
       Flex-Wachstum: 0;
   }
   .box:n-tes-Kind(2) {
       Flexibel wachsen: 3;
   }
   .box:n-tes-Kind(3) {
       Flexibel wachsen: 8;
   }
   .box:n-tes-Kind(4) {
       Flex-Wachstum: 2;
   }
   .box:n-tes-Kind(5) {
       Flex-Wachstum: 7;
   }

Rasterlayout (Containereigenschaften)

Das Rasterlayout unterteilt die Webseite in Raster. Verschiedene Raster können beliebig kombiniert werden, um verschiedene Layouts zu erstellen. Bisher konnte dieser Effekt nur durch komplexe CSS-Frameworks erzielt werden, jetzt ist er durch das Gird-Layout möglich.

Der horizontale Bereich in einem Container wird als Zeile bezeichnet, der vertikale Bereich als Spalte und der Schnittpunkt von Zeilen und Spalten als Zelle .

Normalerweise ergeben n Zeilen und m Spalten n*m Zellen. (Es gibt 9 Zellen in 3 Zeilen und Spalten).

Die Linien, die das Gitter unterteilen, werden „Gitterlinien“ genannt. Horizontale Gitternetzlinien unterteilen die Zeilen und vertikale Gitternetzlinien die Spalten.

Normalerweise gibt es n + 1 horizontale Gitterlinien für n Zeilen und m + 1 vertikale Gitterlinien für m Spalten. (Drei Reihen haben vier horizontale Gitterlinien)

grid-template-columns-Eigenschaft, grid-template-rows-Eigenschaft

Nachdem der Container das Rasterlayout festgelegt hat, wird es als nächstes in Zeilen und Spalten unterteilt. Die Eigenschaft „grid-template-column“ definiert die Breite jeder Spalte und die Eigenschaft „grid-template-rows“ definiert die Höhe jeder Zeile.

 .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenspalten: 160px 160px 160px 160px 160px;
       Rastervorlagenzeilen: 160px 160px 160px 160px 160px;
   }
/*oder*/
   .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenspalten: 20 % 20 % 20 % 20 % 20 %;
       Rastervorlagenzeilen: 20 % 20 % 20 % 20 % 20 %;
   }

Der obige Code gibt ein Raster mit fünf Zeilen und fünf Spalten an, wobei Spaltenbreite und Zeilenhöhe jeweils 160px betragen.

repeat()-Funktion

Manchmal kann das wiederholte Schreiben desselben Wertes mühsam sein, insbesondere wenn viele Raster vorhanden sind. Zu diesem Zeitpunkt können wir die Funktion repeat() verwenden, um die wiederholten Werte zu vereinfachen.

repeat() akzeptiert zwei Parameter, der erste ist die Anzahl der Wiederholungen und der zweite ist der zu wiederholende Wert.

 .Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenspalten: Wiederholung (5, 160px);
       Rastervorlagenzeilen: Wiederholung (5, 160px);
   }
/*oder*/
    .Inhaltsbox {
        Anzeige: Raster;
        Rastervorlagenspalten: Wiederholung (5, 20 %);
        Rastervorlagenzeilen: Wiederholung (5, 20 %);
    }

Es ist auch möglich, repeat() zu verwenden, um ein Muster zu wiederholen.

Die Breite der ersten und vierten Spalte beträgt 160px, die der zweiten und fünften Spalte 100px und die der dritten und sechsten Spalte 140px .

  .Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenspalten: Wiederholung (2, 160px 100px 140px);
   }

Schlüsselwort automatisch ausfüllen

Manchmal ist die Zellengröße festgelegt, die Containergröße jedoch unbestimmt. Wenn Sie möchten, dass in jede Zeile (oder Spalte) so viele Zellen wie möglich passen, können Sie das Schlüsselwort „auto-fill“ verwenden, um die automatische Ausfüllung anzugeben.

  .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenspalten: Wiederholen (automatisches Ausfüllen, 160 px);
   }

fr-Schlüsselwort

Um den Ausdruck proportionaler Beziehungen zu erleichtern, bietet Grid Layout das Schlüsselwort fr (kurz für Fraction, was „Bruch“ bedeutet). Wenn die Breiten der beiden Spalten 1fr bzw. 2fr betragen,

Das bedeutet, dass Letzteres doppelt so viel ist wie Ersteres.

  .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenspalten: 1fr 1fr;
   }

fr kann in Verbindung mit absoluten Längeneinheiten verwendet werden, was sehr praktisch ist.

 .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenspalten: 150px 1fr 2fr;
   }

Die erste Spalte ist 150px breit, die zweite ist halb so breit wie die dritte

auto Schlüsselwort

Das Schlüsselwort „auto“ bedeutet, dass der Browser die Länge selbst bestimmt.

.Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenspalten: 160px automatisch 160px;
   }

Die erste und dritte Spalte sind 160 Pixel breit und die mittlere hat die maximale Breite, es sei denn, für den Zelleninhalt ist eine Mindestbreite festgelegt und dieser Wert ist größer als die maximale Breite.

minmax() Funktion

Die Funktion minmax() generiert einen Längenbereich und gibt an, dass die Länge innerhalb dieses Bereichs liegt. Es akzeptiert zwei Parameter, den Minimalwert und den Maximalwert.

  .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenspalten: 1fr 1fr minmax(100px, 1fr);
   }

Die Funktion minmax(100px1fr) gibt an, dass die Spaltenbreite nicht kleiner als 100px und nicht größer als 1fr sein kann.

Rasterliniennamen

In den Attributen „grid-template-columns“ und „grid-template-rows“ können Sie auch Klammern verwenden, um den Namen jeder Rasterlinie anzugeben, damit Sie später leichter darauf zugreifen können.

   .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenspalten: [c1] 160px [c2] 160px [c3] auto [c4];
       Raster-Vorlagenzeilen: [r1] 160px [r2] 160px [r3] auto [r4];
   }

Der obige Code gibt ein Rasterlayout mit 3 Zeilen mal 3 Spalten an, es gibt also 4 vertikale und 4 horizontale Rasterlinien. Die Namen der acht Zeilen stehen in eckigen Klammern. Beim Rasterlayout kann dieselbe Zeile mehrere Namen haben, z. B. [fünfte Zeile Zeile 5].

Layoutbeispiele

Die Grid-Template-Columns-Eigenschaft ist für das Webseiten-Layout sehr nützlich. Für ein zweispaltiges Layout ist nur eine Codezeile erforderlich.

   .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenspalten: 70 % 30 %;
   }

Die linke Spalte ist auf 70 % und die rechte Spalte auf 30 % eingestellt .

Auch das traditionelle Zwölferraster-Layout lässt sich leicht schreiben.

   .Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenspalten: Wiederholung (12, 1fr);
   }

Grid-Row-Gap-Eigenschaft, Grid-Column-Gap-Eigenschaft

Die Eigenschaft „grid-row-gap“ legt den Abstand zwischen Zeilen (Zeilenabstand) fest, und die Eigenschaft „grid-column-gap“ legt den Abstand zwischen Spalten (Spaltenabstand) fest.

  .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenzeilen: Wiederholung (4, 160px);
       Raster-Vorlagenspalten: Wiederholung (4, 160px);
       Rasterzeilenabstand: 50px;
       Rasterspaltenabstand: 50px;
   }

grid-gap-Eigenschaft

Die Grid-Gap-Eigenschaft ist eine kombinierte Abkürzung aus Grid-Column-Gap und Grid-Row-Gap.

grid-gap : <Rasterzeilenlücke> <Rasterspaltenlücke>

   .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenzeilen: Wiederholung (4, 160px);
       Raster-Vorlagenspalten: Wiederholung (4, 160px);
       Rasterabstand: 50px;
   }

Wenn der zweite Wert von grid-gap weggelassen wird, geht der Browser davon aus, dass der zweite Wert dem ersten Wert entspricht. Gemäß dem neuesten Standard wurde das Präfix „grid-“ der drei oben genannten Eigenschaftsnamen gelöscht, „grid-column-gap“ und „grid-row-gap“ werden als „column-gap“ und „row-gap“ geschrieben und „grid-gap“ wird als „gap“ geschrieben.

grid-template-areas-Eigenschaft

Mit dem Rasterlayout können Sie „Bereiche“ angeben, die aus einer einzelnen Zelle oder mehreren Zellen bestehen können. Die Eigenschaft „grid-template-areas“ wird zum Definieren von Bereichen verwendet.

   .Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenbereiche: „abc“
                            'def'
                            'gh ich';
   }

Der obige Code unterteilt zunächst 9 Zellen und benennt sie dann als neun Bereiche von a bis i, die jeweils diesen neun Zellen entsprechen. Die 9 Zellen können auch in drei Bereiche a, b und c unterteilt werden.

   .Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenbereiche: „aaa“
                            'bbb'
                            "cc c";
   }

Sie können den Kopfbereich verwenden, der untere Teil ist der Fußzeilenbereich und der mittlere Teil ist die Haupt- und Seitenleiste.

   .Inhaltsbox {
       Anzeige: Raster;
       grid-template-areas: "Kopfzeile, Kopfzeile, Kopfzeile"
                            "Haupt-Seitenleiste"
                            "Fußzeile Fußzeile Fußzeile";
   }

Wenn wir bestimmte Bereiche nicht verwenden müssen, stellen wir sie durch einen „Punkt“ (.) dar.

   .Inhaltsbox {
       Anzeige: Raster;
       Rastervorlagenbereiche: „a . c“
                            f'
                            'g . i';
   }

grid-auto-flow-Eigenschaft

1. Nach dem Aufteilen des Rasters werden die Unterelemente des Containers automatisch der Reihe nach in jedes Raster eingefügt. Die Standardplatzierungsreihenfolge ist „Zuerst Zeilen, dann Spalten“, was bedeutet, dass zuerst die erste Zeile ausgefüllt und dann mit der Platzierung der zweiten Zeile begonnen wird.

Zweitens wird diese Reihenfolge durch das Grid-Auto-Flow-Attribut bestimmt und der Standardwert ist „Zeile“, „zuerst Zeilen, später Spalten“. Sie können es auch auf Spalten einstellen, was bedeutet „zuerst Spalten, dann Zeilen“.

// Zuerst die Spalten, dann die Zeilen.content-box {
       Anzeige: Raster;
       Raster-Vorlagenbereiche: „aaa“
                            'bbb'
                            "cc c";
       Raster-Auto-Flow: Spalte;
   }

Zeilendichte und Spaltendichte

Die Grid-Auto-Flow-Eigenschaft kann nicht nur auf Zeilen und Spalten, sondern auch auf Zeilen- und Spaltendichte eingestellt werden. Diese beiden Werte werden hauptsächlich verwendet, um nach der Angabe von Positionen für bestimmte Elemente die verbleibenden Elemente automatisch festzulegen.

Lassen Sie Element 1 und Element 2 jeweils drei Zellen haben. Anschließend wird unter dem standardmäßigen Raster-Autoflow das folgende Layout generiert.

 .Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenspalten: Wiederholung (5, 160px);
       Rastervorlagenzeilen: Wiederholung (5, 160 px);
       Raster-Auto-Flow: Zeile;
   }
   .box:n-tes-Kind(1) {
        Rasterspaltenanfang: 1;
        Gitterspaltenende: 4;  
   }
   .box:n-tes-Kind(2) {
        Rasterspaltenanfang: 1;
        Gitterspaltenende: 4;  
   }

Im obigen Bild ist die Position nach Element 1 leer. Dies liegt daran, dass Element 3 standardmäßig auf Element 2 folgt und daher nach Element 2 platziert wird. Wenn wir die Einstellungen auf Zeilendichtheit ändern, bedeutet das „Erst die Zeilen, dann die Spalten“, und diese möglichst präzise und ohne Leerzeichen füllen.

.Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenspalten: Wiederholung (5, automatisch);
       Raster-Vorlagenzeilen: Wiederholung (5, automatisch);
       grid-auto-flow: Zeilen dicht; /* Leerzeichen vermeiden */ 
   }
.box:n-tes-Kind(1) {
       Rasterspaltenanfang: 1;
       Gitterspaltenende: 4;  
   }
.box:n-tes-Kind(2) {
       Rasterspaltenanfang: 1;
       Gitterspaltenende: 4;  
   }

Das Bild oben füllt zuerst die erste und dann die zweite Reihe, so dass auf Artikelnummer 1 Artikelnummer 3 folgt.

Wenn Sie die Einstellung auf „Spaltendicht“ ändern, bedeutet das „Erst Spalten, dann Zeilen“, und versuchen Sie, so viele Leerzeichen wie möglich auszufüllen.

.Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenspalten: Wiederholung (5, automatisch);
       Raster-Vorlagenzeilen: Wiederholung (5, automatisch);
       grid-auto-flow: Spalte dicht; /* Leerzeichen vermeiden*/ 
   }
.box:n-tes-Kind(1) {
       Rasterspaltenanfang: 1;
       Gitterspaltenende: 4;  
   }
.box:n-tes-Kind(2) {
       Rasterspaltenanfang: 1;
       Gitterspaltenende: 4;  
   }

Eigenschaft „justify-items“, Eigenschaft „align-items“

Die Eigenschaft „justify-items“ legt die horizontale Position des Zelleninhalts (links, mittig und rechts) fest, und die Eigenschaft „align-items“ legt die vertikale Position des Zelleninhalts (oben, mittig und unten) fest.

Die Schreibweise dieser beiden Attribute ist exakt gleich und beide können die folgenden Attributwerte verwenden.

.Inhaltsbox {
  Elemente ausrichten: Anfang | Ende | Mitte | Strecken;
  Elemente ausrichten: Start | Ende | Mitte | Strecken;
}

Start: Richtet die Startkante der Zelle aus.

Der Zellinhalt wird linksbündig ausgerichtet, wie in der folgenden Abbildung dargestellt.

  .Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenspalten: Wiederholung (5, 160px);
       Rastervorlagenzeilen: Wiederholung (5, 160 px);
       justify-items: start; /* Startkante der Zelle ausrichten */
   }
   .Kasten {
        Breite: 100px;
        Höhe: 100px;
   }

Die Kopfzeile des Zelleninhalts wird ausgerichtet und der Effekt ist wie unten gezeigt.

   .Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenspalten: Wiederholung (5, 160px);
       Rastervorlagenzeilen: Wiederholung (5, 160 px);
       align-items: start; /* Kopfzeile des Zelleninhalts ausrichten*/
   }
   .Kasten {
        Breite: 100px;
        Höhe: 100px;
   }

Ende: Richtet an der Endkante der Zelle aus.

Die Endkante des Zellinhalts wird ausgerichtet und der Effekt ist wie unten gezeigt.

   .Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenspalten: Wiederholung (5, 160px);
       Rastervorlagenzeilen: Wiederholung (5, 160 px);
       justify-items: end; /* Endkante des Zelleninhalts ausrichten */
   }
   .Kasten {
        Breite: 100px;
        Höhe: 100px;
   }

Mitte: Die Zelle wird innen zentriert.

Strecken: Strecken, um die gesamte Breite einer einzelnen Zelle auszufüllen (Standardwert).

Platziere Gegenstände

Die Eigenschaft „Place-Items“ ist eine kombinierte Kurzform der Eigenschaften „Align-Items“ und „Justify-Items“.

Elemente platzieren: <Elemente ausrichten> <Elemente ausrichten>;

Platziere Elemente: Start, Ende

Wenn der zweite Wert weggelassen wird, betrachtet der Browser ihn als gleich dem ersten Wert.

Eigenschaft „justify-content“, Eigenschaft „align-content“

Die Eigenschaft „justify-items“ ist die horizontale Position des gesamten Inhaltsbereichs im Container (links, mittig und rechts), und die Eigenschaft „align-items“ ist die vertikale Position des gesamten Inhaltsbereichs (oben, mittig und unten).

Die Schreibweise dieser beiden Attribute ist exakt gleich und beide können die folgenden Attributwerte verwenden.

.Inhaltsbox {
  Inhalt ausrichten: Anfang | Ende | Mitte | Strecken | Abstand drumherum | Abstand dazwischen | gleichmäßiger Abstand;
  Inhalt ausrichten: Anfang | Ende | Mitte | strecken | Abstand herum | Abstand dazwischen | gleichmäßiger Abstand;  
}

Die folgenden Abbildungen verwenden alle das Attribut justify-items als Beispiel. Die Abbildungen des Attributs align-items sind genau gleich, außer dass die horizontale Richtung in vertikal geändert wurde.

Start: Richtet die Startgrenze des Containers aus.

Ende: An der Endgrenze des Containers ausrichten.

Mitte: Zentriert im Container.

Strecken: Wenn die Elementgröße nicht angegeben ist, wird es so gestreckt, dass es den gesamten Rastercontainer einnimmt.

space-around: Auf beiden Seiten jedes Elements ist gleich viel Platz. Daher ist der Abstand zwischen den Elementen doppelt so groß wie der Abstand zwischen den Elementen und dem Containerrand.

Abstand zwischen: Der Abstand zwischen den Elementen ist gleich und es gibt keinen Abstand zwischen den Elementen und dem Containerrand.

space-evenly: Der Abstand zwischen den Elementen ist gleich und der Abstand zwischen den Elementen und dem Containerrand ist ebenfalls gleich lang.

Die place-content-Eigenschaft

Die Eigenschaft „place-content“ ist eine kombinierte Kurzform der Eigenschaften „align-content“ und „justify-content“.

Inhalt platzieren: <Inhalt ausrichten> <Inhalt ausrichten>;

Inhalt platzieren: Raum herum, gleichmäßiger Raum;

Wenn Sie den zweiten Wert weglassen, geht der Browser davon aus, dass der zweite Wert dem ersten Wert entspricht.

grid-auto-columns-Eigenschaft, grid-auto-rows-Eigenschaft

1. Manchmal liegt der angegebene Standort einiger Elemente außerhalb des vorhandenen Rasters. Beispielsweise hat das Raster nur drei Spalten, aber in der fünften Zeile ist ein bestimmtes Element angegeben. An diesem Punkt generiert der Browser automatisch zusätzliche Raster zum Platzieren der Elemente.

2. Mit den Attributen „grid-auto-columns“ und „grid-auto-rows“ werden die Spaltenbreite und Zeilenhöhe der vom Browser automatisch erstellten zusätzlichen Raster festgelegt. Sie werden genauso geschrieben wie Grid-Template-Columns und Grid-Template-Rows. Werden diese beiden Attribute nicht angegeben, bestimmt der Browser die Spaltenbreite und Zeilenhöhe des neu hinzugefügten Rasters ausschließlich anhand der Größe des Zellinhalts.

 .Inhaltsbox {
       Anzeige: Raster;
       Raster-Vorlagenspalten: Wiederholung (3, 250px);
       Raster-Vorlagenzeilen: Wiederholung (3, 200px);
       grid-auto-rows: 100px; /* Neu hinzugefügte Zeilenhöhe */
   }
   .box:n-tes-Kind(8) {
        Zeilenhöhe: 80px;
        grid-row-start: 4; /*Vierte Zeile festlegen*/
        grid-column-start: 2; /*Zweite Spalte festlegen*/
    } 
	.box:n-tes-Kind(9) {
        Zeilenhöhe: 80px;
        grid-row-start: 5; /*Fünfte Zeile festlegen*/   
        grid-column-start: 3; /*Dritte Spalte festlegen*/
    }

Der obige Code gibt an, dass die neu hinzugefügte Zeilenhöhe einheitlich 100 Pixel beträgt (die ursprüngliche Zeilenhöhe beträgt 200 Pixel).

Die Eigenschaft grid-template ist eine kombinierte Abkürzung der drei Eigenschaften grid-template-columns, grid-template-rows und grid-template-areas.

Die Grid-Eigenschaft ist eine kombinierte Abkürzung der sechs Eigenschaften grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns und grid-auto-flow.

Aus Gründen der Lesbarkeit und Schreibfreundlichkeit wird empfohlen, die Attribute nicht zusammenzuführen. Daher werden diese beiden Attribute hier nicht im Detail vorgestellt.

Rasterlayout „Gird“ (Projekteigenschaften)

Eigenschaften „Rasterspaltenstart“, „Rasterspaltenende“, „Rasterzeilenstart“, „Rasterzeilenende“

grid-column-start-Eigenschaft: die vertikale Rasterlinie, an der sich der linke Rand befindet

grid-column-end-Eigenschaft: die vertikale Rasterlinie, an der sich der rechte Rand befindet

grid-row-start-Eigenschaft: die horizontale Rasterlinie, an der sich der obere Rand befindet

Eigenschaft „grid-row-end“: die horizontale Gitterlinie, an der sich die untere Grenze befindet

1. Der linke Rand von Element 1 ist die fünfte vertikale Rasterlinie und der obere Rand ist die dritte horizontale Rasterlinie.

.Inhaltsbox {
        Anzeige: Raster;
        Raster-Vorlagenspalten: Wiederholung (5, 160px);
        Rastervorlagenzeilen: Wiederholung (5, 160px);
 }
 .box:n-tes-Kind(1) {
        grid-row-start: 3; /* Der obere Rand ist die dritte horizontale Gitterlinie*/
        grid-column-start: 5; /* Der linke Rand ist die fünfte vertikale Gitterlinie*/
 }

Mit Ausnahme von Element Nr. 1 haben die anderen Elemente keine festgelegte Position und werden automatisch vom Browser angeordnet. Derzeit werden ihre Positionen durch das Grid-Auto-Flow-Attribut des Containers bestimmt. Der Standardwert dieses Attributs ist „row“, daher werden sie nach dem Schema „erst Zeilen, dann Spalten“ angeordnet. Wir können den Wert dieser Eigenschaft jeweils in „Spaltendichte“, „Zeilendichte“ und „Spaltendichte“ ändern, um zu sehen, wie sich die Positionen anderer Elemente ändern.

2. Die Auswirkung der Festlegung der Positionen von vier Grenzen

.Inhaltsbox {
        Anzeige: Raster;
        Raster-Vorlagenspalten: Wiederholung (5, 160px);
        Rastervorlagenzeilen: Wiederholung (5, 160 px);
}
.box:n-tes-Kind(1) {
        grid-row-start: 2; /* Der obere Rand ist die zweite horizontale Gitterlinie*/
        grid-row-end: 5; /* Die untere Grenze ist die fünfte horizontale Gitterlinie*/
        grid-column-start: 1; /* Der linke Rand ist die erste vertikale Gitterlinie*/
        grid-column-end: 4; /* Der rechte Rand ist die vierte vertikale Gitterlinie*/
    }

3. Zusätzlich zur Angabe der Gitterliniennummer können die Werte dieser vier Attribute auch als Gitterlinienname angegeben werden. (Die Wirkung ist die gleiche wie oben)

  .Inhaltsbox {
        Anzeige: Raster;
        Rastervorlagenspalten: [c1] 160px [c2] 160px [c3] 160px [c4] 160px [c5] 160px [c6];
        Raster-Vorlagenzeilen: [r1] 160px [r2] 160px [r3] 160px [r4] 160px [r5] 160px [r6];
    }
    .box:n-tes-Kind(1) {
        Gitterzeilenstart: r2;
        Gitterzeilenende: r5;
        Rasterspaltenanfang: c1;
        Gitterspaltenende: c4;
    }

4. Die Werte dieser vier Attribute können auch das Schlüsselwort span verwenden, um "span" anzugeben, dh, wie viele Gitter zwischen den linken und rechten Rändern (oberen und unteren Rändern) aufgespannt werden.

.Inhaltsbox {
        Anzeige: Raster;
        Raster-Vorlagenspalten: Wiederholung (5, 160px);
        Rastervorlagenzeilen: Wiederholung (5, 160 px);
}
.box:n-tes-Kind(1) {
        grid-column-start: span 3; /* Die linken und rechten Ränder erstrecken sich über 3 Gitter*/
        grid-row-start: span 2; /* Die oberen und unteren Ränder erstrecken sich über 2 Gitter*/
}

Der Effekt ist der gleiche wie oben

.box:n-tes-Kind(1) {
        grid-column-end: span 3; /* Die linken und rechten Ränder erstrecken sich über 3 Raster*/
        grid-row-end: span 2; /* Die oberen und unteren Ränder erstrecken sich über 2 Gitter*/
}

Wenn es bei Verwendung dieser vier Eigenschaften zu einer Überlappung von Elementen kommt, wird die Z-Index-Eigenschaft verwendet, um die Überlappungsreihenfolge der Elemente anzugeben.

Grid-Column-Eigenschaft, Grid-Row-Eigenschaft

Die Grid-Column-Eigenschaft ist eine kombinierte Kurzform von Grid-Column-Start und Grid-Column-End, und die Grid-Row-Eigenschaft ist eine kombinierte Kurzform von Grid-Row-Start und Grid-Row-End.

.box:n-tes-Kind(1) {
  Rasterspalte: <Startzeile> / <Endzeile>;
  Rasterzeile: <Startzeile> / <Endzeile>;
}

.box:n-tes-Kind(1) {
        Gitterspalte: 1 / 4;
        Gitterzeile: 2 / 4;
}
/* ist gleichbedeutend mit */
.box:n-tes-Kind(1) {
        Rasterspaltenanfang: 1;
        Gitterspaltenende: 4;
        Rasterzeilenstart: 2;  
        Gitterzeilenende: 4;
}

Sie können in diesen beiden Eigenschaften auch das Schlüsselwort span verwenden, um die Ausdehnung auf mehrere Raster anzuzeigen.

.box:n-tes-Kind(1) {
        Rasterspalte: 1 / Spanne 3;
        Gitterzeile: 2 / Spanne 3;
 } 
/* ist gleichbedeutend mit */
.box:n-tes-Kind(1) {
        Rasterspaltenanfang: 1;
        Gitterspaltenende: 4;
        Rasterzeilenstart: 2;  
        Gitterzeilenende: 5;
}

Der Schrägstrich und der darauf folgende Teil können weggelassen werden und erstrecken sich standardmäßig über ein Raster.

.box:n-tes-Kind(1) {
        Gitterspalte: 1;
        Gitterzeile: 1;
 }

Die Grid-Area-Eigenschaft

Die Rasterbereichseigenschaft gibt den Bereich an, in dem Elemente platziert werden.

    .Inhaltsbox {
        Anzeige: Raster;
        Raster-Vorlagenspalten: Wiederholung (3, automatisch);
        Raster-Vorlagenzeilen: Wiederholung (3, automatisch);
        Raster-Vorlagenbereiche: „abc“
                             'def'
                             'gh ich';
    }
    .box:n-tes-Kind(1) {
        grid-area: e; /* Element 1 befindet sich im Bereich e*/
    }

Die Grid-Area-Eigenschaft kann auch als kombinierte Kurzform von Grid-Row-Start, Grid-Column-Start, Grid-Row-End und Grid-Column-End verwendet werden, um die Position des Elements direkt anzugeben.

.box:n-tes-Kind(1) {
  Rasterbereich: <Zeilenanfang> / <Spaltenanfang> / <Zeilenende> / <Spaltenende>;
}

.box:n-tes-Kind(1) {
  Rasterfläche: 3 / 3 / 4 / 4;
}

justify-self-Eigenschaft, align-self-Eigenschaft, place-self-Eigenschaft

Die Eigenschaft „justify-self“ legt die horizontale Position des Zellinhalts (links, Mitte, rechts) fest. Dies ist genau dasselbe wie die Eigenschaft „justify-items“, gilt jedoch nur für ein einzelnes Element.

Das Attribut „align-self“ legt die vertikale Position (oben, mittig, unten) des Zellinhalts fest. Dies entspricht genau der Verwendung des Attributs „align-items“ und gilt nur für ein einzelnes Element.

1. Beide Attribute können die folgenden vier Werte annehmen.

.box:n-tes-Kind(1) {
  selbst rechtfertigen: Start | Ende | Mitte | strecken;
  selbst ausrichten: Start | Ende | Mitte | strecken;
}

Start: Richtet die Startkante der Zelle aus.

Ende: Richtet an der Endkante der Zelle aus.

Mitte: Die Zelle wird innen zentriert.

Strecken: Strecken, um die gesamte Breite der Zelle auszufüllen (Standardwert).

Das Folgende ist ein Beispiel für „justify-self : start .

.box:n-tes-Kind(1) {
  sich rechtfertigen: anfangen;
}

Die Eigenschaft „place-self“ ist eine kombinierte Kurzform der Eigenschaften „align-self“ und „justify-self“.

.box:n-tes-Kind(1) {
	Platziere dich: <Ausrichten dich> <Rechtfertigen dich>;
}

Zum Beispiel:

.box:n-tes-Kind(1) {
	Ort-Selbst: Zentrum Zentrum;
}

Wenn der zweite Wert weggelassen wird, behandelt die place-self-Eigenschaft die beiden Werte als gleich.

siehe

Ruan Yifeng Flex Layout-Tutorial: Syntax

Ruan Yifeng CSS-Rasterlayout-Tutorial

Dies ist das Ende dieses Artikels über Grid-Layout und Flex-Layout der Anzeige in CSS3. Weitere Informationen zu Grid-Layout und Flex-Layout der Anzeige finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!