CSS Flexbox und Grid: Die Kunst, responsive Layouts zu erstellen

Flex Flexibles Layout

Anzeige: Flex

Aktivieren Sie den Flex-Layoutmodus. Legen Sie ein Element als Flex-Container fest und seine direkten untergeordneten Elemente werden zu Flex-Elementen.

.container {
    display: flex;
}

Flex-Richtung

Definiert die Hauptachsenrichtung (die Richtung der Artikelanordnung). Optionale Werte:

• Reihe (Standard): horizontal, von links nach rechts.
• Zeilenumkehr: horizontal, von rechts nach links.
• Spalte: vertikal, von oben nach unten.
• Spaltenumkehr: vertikal, von unten nach oben.

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

Flexfolie

Steuert, ob umgebrochen wird, wenn in einer Zeile nicht genügend Platz vorhanden ist. Optionale Werte:

• nowrap (Standard): kein Wrap, Artikel können über den Container hinauslaufen.
• Umbruch: Umbruch, Elemente werden in mehreren Reihen angeordnet.
• wrap-reverse: Umbruch, die erste Zeile befindet sich unten und die nachfolgenden Zeilen werden nach oben angeordnet.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

Rechtfertigungsinhalt

Definiert die Ausrichtung auf der Hauptachse. Optionale Werte:

• Flex-Start (Standard): Elemente werden am Startpunkt ausgerichtet.
• flex-end: Elemente werden am Endpunkt ausgerichtet.
• Mitte: Elemente werden in der Mitte ausgerichtet.
• Abstand zwischen den Gegenständen: Verteilen Sie den Abstand zwischen den Gegenständen gleichmäßig. Der erste und der letzte Gegenstand werden jeweils an den Enden des Behälters befestigt.
• Rundum-Abstand: Verteilen Sie den Abstand zwischen den Gegenständen gleichmäßig, der Abstand auf beiden Seiten der Gegenstände ist gleich.
• Platzgleichmäßig: Verteilen Sie die Abstände zwischen den Artikeln gleichmäßig. Der Abstand zwischen den Artikeln und dem Rand des Behälters sowie zwischen den Artikeln ist gleich.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items

Definiert die Ausrichtung auf der Querachse. Optionale Werte:

• Strecken (Standard): Elemente werden gedehnt, um die gesamte Querachse auszufüllen.
• Flex-Start: Elemente werden am Anfang der Querachse ausgerichtet.
• Flex-Ende: Elemente werden am Ende der Querachse ausgerichtet.
• Mitte: Elemente werden auf der Querachse zentriert.
• Grundlinie: Elemente werden nach Grundlinie ausgerichtet.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

Inhalt ausrichten

Funktioniert nur im mehrzeiligen Flex-Layout (Flex-Wrap: Wrap), definiert die Ausrichtung mehrzeiliger Elemente auf der Querachse. Optionale Werte:

• Strecken (Standard): Jede Zeile wird gedehnt, um die gesamte Querachse auszufüllen.
• Flex-Start: Jede Reihe wird am Anfang der Querachse ausgerichtet.
• Flex-Ende: Jede Reihe wird am Ende der Querachse ausgerichtet.
• Mitte: Jede Zeile wird an der Mitte der Querachse ausgerichtet.
• Abstand dazwischen: Verteilen Sie den Abstand zwischen den einzelnen Reihen gleichmäßig, und die erste und letzte Reihe werden jeweils an den beiden Enden des Behälters befestigt.
• Abstand: Verteilen Sie den Abstand zwischen den einzelnen Reihen gleichmäßig, und der Abstand auf beiden Seiten der Reihe ist gleich.

.container {
    display: flex;
}

Befehl

Definiert die Reihenfolge der Elemente. Je kleiner der Wert, desto höher die Ordnung. Der Standardwert ist 0.

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

Flex-Grow

Definiert das Vergrößerungsverhältnis des Elements. Der Standardwert ist 0, was bedeutet, dass keine Vergrößerung erfolgt. Wenn alle Elemente auf Werte ungleich Null eingestellt sind, wird der verbleibende Speicherplatz proportional verteilt.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

Flex-Schrumpf

Definiert das Schrumpfungsverhältnis des Artikels. Der Standardwert ist 1, was bedeutet, dass er verkleinert werden kann. Wenn alle Elemente auf Werte ungleich Null eingestellt sind, werden sie proportional verkleinert, um ein Überlaufen des Containers zu verhindern.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Flex-Basis

Definiert die anfängliche Größe des Elements, bevor der verbleibende Platz verteilt wird. Akzeptiert Längen-, Prozent-, Auto- (Standard) oder Inhaltswerte.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

biegen

Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Standardmäßig ist 0 1 automatisch.

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

align-self

Überschreibt die align-items-Eigenschaft des Containers, um die Ausrichtung eines einzelnen Elements auf der Querachse zu definieren. Die optionalen Werte sind die gleichen wie bei align-items.

.item {
    order: <integer>;
}
</integer>

Raster-Raster-Layout

Anzeige: Raster;

Schalten Sie den Rasterlayoutmodus ein. Legen Sie ein Element als Rastercontainer fest und seine direkten untergeordneten Elemente werden zu Rasterelementen (Zellen).

.item {
    flex-grow: <number>; /* Default is 0 */
}
</number>

Rastervorlagenspalten und Rastervorlagenzeilen

Definieren Sie die Größe der Spalten- und Zeilenspuren des Rasters. Akzeptiert Länge, Prozentsatz, fr (Brucheinheit, die den Bruchteil des Rasterraums darstellt) oder automatische Werte. Sie können auch die Funktion „repeat()“ verwenden, um wiederholte Titel zu erstellen, und die Funktion „minmax()“, um die minimale und maximale Größe des Titels zu definieren.

.item {
    flex-shrink: <number>; /* defaults to 1 */
}
</number>

Rastervorlagenbereiche

Definieren Sie den Bereich des Rasterlayouts, indem Sie das Element benennen und die Rasterstruktur mit einer Zeichenfolge beschreiben. Der Artikelname verwendet . um eine leere Zelle darzustellen.

.item {
    flex-basis: <length> | <percentage> | auto | content;
}
</percentage></length>

Gitterlücke oder Gitterspaltenlücke und Gitterzeilenlücke

Legen Sie den Abstand zwischen den Elementen im Raster fest. Akzeptiert Längen- oder Prozentwerte.

.container {
    display: flex;
}

Grid-Auto-Spalten und Grid-Auto-Zeilen

Definieren Sie die Spurgröße neu hinzugefügter Zeilen oder Spalten beim automatischen Füllen des Rasters. Wird wirksam, wenn das Element den definierten Rasterbereich überschreitet.

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

Grid-Auto-Flow

Steuert, wie Rasterelemente automatisch gefüllt und angeordnet werden. Optionale Werte:

• Zeile (Standard): zeilenweise füllen.
• Spalte: spaltenweise füllen.
• dicht: Wenn eine Zeile oder Spalte mit dicht verwendet wird und Lücken im Raster vorhanden sind, versuchen neue Elemente, diese Lücken zu füllen, anstatt sie einfach am Ende des Rasters hinzuzufügen.

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

Rasterspaltenanfang, Rasterspaltenende, Rasterzeilenanfang und Rasterzeilenende

Geben Sie manuell die Start- und Endpositionen von Elementen im Raster an.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Gitterfläche

Kurzschrift-Eigenschaft zum gleichzeitigen Festlegen von Grid-Row-Start, Grid-Column-Start, Grid-Row-End und Grid-Column-End oder zum Verweisen auf den in Grid-Template-Areas definierten Bereichsnamen.

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

CSS Grid kombiniert mit Flexbox

In einigen Fällen können wir die Vorteile von CSS Grid und Flexbox kombinieren, um komplexere responsive Layouts zu erstellen.

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

Zuerst wird CSS Grid verwendet, um ein Rasterlayout mit adaptiver Spaltenbreite zu erstellen. Jedes Rasterelement (untergeordnetes Element) verwendet Flexbox im Inneren, um den Inhalt vertikal zu zentrieren. Wenn die Bildschirmbreite weniger als 768 Pixel beträgt, wechselt die Medienabfrage zu einem einspaltigen Layout, um sie an mobile Geräte anzupassen.

Flexbox vs. Grid-Auswahl

Die Wahl der Verwendung von Flexbox oder Grid hängt normalerweise von den spezifischen Anforderungen ab:

• Flexbox eignet sich für die Handhabung eindimensionaler Layouts, wie z. B. die Anordnung von Elementen in Zeilen oder Spalten sowie die Ausrichtung und Auffüllung von Elementen.
• CSS Grid eignet sich besser für die Handhabung zweidimensionaler Layouts wie Tabellen oder komplexer Rasterlayouts und für die präzise Zellsteuerung.

Das obige ist der detaillierte Inhalt vonCSS Flexbox und Grid: Die Kunst, responsive Layouts zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!