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

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen











Versuchen wir, hier einen Begriff zu prägen: "Statischer Formanbieter". Sie bringen Ihre HTML

Zu Beginn eines neuen Projekts erfolgt die SASS -Zusammenstellung im Blinzeln eines Auges. Dies fühlt sich gut an, besonders wenn es mit Browsersync kombiniert ist, das nachlädt

In der Zusammenfassung der Plattformnachrichten in dieser Woche stellt Chrome ein neues Attribut für das Laden, Zugänglichkeitspezifikationen für Webentwickler und die BBC -Bewegungen ein

Ich schaue mir das HTML -Element zum ersten Mal an. Ich habe es für eine Weile dessen bewusst, aber Haven ' Es wurde es noch nicht für einen Dreh genommen. Es hat einige ziemlich cool und

Buy or Build ist eine klassische Technologiedebatte. Das Aufbau von Dingen selbst ist vielleicht billiger, weil Ihre Kreditkartenrechnung keine Werbebuchung gibt, aber

In der Roundup in dieser Woche, einem praktischen Lesezeichen für die Inspektion von Typografie, unter Verwendung dessen, wie sich JavaScript -Module gegenseitig importieren, sowie Facebook ' s.

Für eine Weile war iTunes der große Hund im Podcasting. Wenn Sie also "Abonnieren Sie Podcast" verlinkt haben, um zu mögen:

Es gibt eine Menge Analyseplattformen, mit denen Sie Besucher- und Nutzungsdaten auf Ihren Websites verfolgen können. Vielleicht vor allem Google Analytics, das weit verbreitet ist
