Raster- und Flex-Layout in CSS

Einführung

• FlexBox und Rasterlayout sind beide leistungsstarke Layouts.

Flexbox:

• Flexbox ist ein eindimensionales Layoutmodell und eignet sich am besten zum Anordnen von Elementen in einer einzelnen Zeile oder einer einzelnen Spalte.
• Flexbox ist besonders nützlich, wenn die Größe der Elemente oder die Größe des Containers unbekannt ist.
• Es eignet sich hervorragend zum horizontalen und vertikalen Ausrichten von Elementen und ist sehr nützlich zum Erstellen von Navigationsleisten, Seitenleisten oder Symbolleisten.

CSS-Raster:

• Grid ist ein zweidimensionales Layoutmodell und eignet sich am besten zum gleichzeitigen Anordnen von Elementen in Zeilen und Spalten.
• Es eignet sich hervorragend für die Erstellung komplexer Layouts und kann sowohl Spalten als auch Zeilen gleichzeitig verarbeiten, was es zu einer guten Wahl für die Erstellung komplexer Seitenlayouts macht.

Rasterlayout im Detail

grid-template-columns: repeat(3, 1fr);
grid-template-row: repeat(3, auto);
grid-column: 1/3
grid-row: 1/4

Zeilenüberschreibung

• Die Anweisung „repeat(3, minmax(200px, 1fr))“ erstellt drei Zeilen (oder Spalten, je nachdem, wo sie verwendet wird), jede mit einer Mindestgröße von 200 Pixel und einer Maximalgröße von 1 Fr.
• Die 1fr-Einheit stellt einen Bruchteil des verfügbaren Platzes im Gittercontainer dar. Wenn also die Größe des Containers die gesamte Mindestgröße aller Zeilen (in diesem Fall 600 Pixel) überschreitet, wird der verbleibende Platz gleichmäßig auf die Zeilen verteilt.

repeat(3, minmax(200px 1fr))

Automatische Anpassung und automatisches Ausfüllen

Die Schlüsselwörter „Auto-Fill“ und „Auto-Fit“ in CSS Grid steuern, wie sich das Raster verhält, wenn die Rasterelemente keinen zusätzlichen Platz im Rastercontainer beanspruchen.

automatisches Ausfüllen

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

In diesem Beispiel erstellt das Raster so viele 100-Pixel-Spalten, wie in den Container passen. Wenn noch Platz übrig ist, wird dieser gleichmäßig auf die Spalten verteilt.

Auto-Fit:

• Dieses Schlüsselwort weist das Raster auch an, so viele Spuren wie möglich zu erstellen, aber es reduziert die leeren Spuren, sodass am Ende des Rasters keine leeren Spuren vorhanden sind.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

In diesem Beispiel erstellt das Raster so viele 100-Pixel-Spalten, wie in den Container passen. Wenn noch Platz übrig ist, wird dieser gleichmäßig auf die Spalten verteilt und alle leeren Spalten werden ausgeblendet.

Untergitter

• Der Unterrasterwert im CSS-Rasterlayout wird verwendet, wenn ein Rasterelement zu einem Rastercontainer werden und an seinem übergeordneten Raster ausgerichtet werden soll.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  display: grid;
  grid-template-columns: subgrid;
}

HINWEIS:-

• Dies kann nützlich sein, wenn Sie möchten, dass verschachtelte Raster am übergeordneten Raster ausgerichtet werden.
• Subgrid wird jedoch nicht in allen Browsern weitgehend unterstützt.

Containerabfrage

1. Containergrößenabfrage

• Breite Medienabfragen berücksichtigen die Breite des Ansichtsfensters Bei Abfragen zur Containergröße wird jedoch die Containerbreite berücksichtigt. Container sind die abgefragten Elemente.

Regeln:-

• Regeln, bei denen nur die Nachkommen des Containers wirksam sind nicht der Container selbst

• Containergrößenabfragen sind eine Ergänzung zum Responsive Design und kein Ersatz für Medienabfragen.
  

<article class="card">
    <h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>

<!-- we can't query cards in container query so only work with descendants-->
<!-- Workaround solution would be check below-->
<div class="card">
<article >
    <h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>
</div>

.card {
  container-name: card;
  container-type: inline-size;
}

@container card (min-width: 200px) {
  article {
    background-color: red;
  }
}

@container card (min-width: 250px) {
  article {
    ...
  }
}

Das obige ist der detaillierte Inhalt vonRaster- und Flex-Layout in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!