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>;
}

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 */
}

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 */
}

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;
}

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!