Beispielcode für CSS-Flex-Layout mit automatischem Zeilenumbruch
|
Um einen Flex-Container zu erstellen, fügen Sie einem Element einfach die Eigenschaft „display: flex“ hinzu.
Ähnlich: Passen Sie den Stil über das CSS der Konsole wie folgt an
Erhalten: Offensichtlich ist bestätigt, dass das Flex-Element verkleinert wird
An dieser Stelle müssen wir flex-flow: wrap zum übergeordneten Element hinzufügen. Die Details sind wie folgt
Endergebnis
Weitere Referenzen Anzeige: Flex; /* flex-direction bestimmt die Richtung der Hauptachse row (default) | row-reverse | column | column-reverse*/ /* Flex-Richtung: Zeile; */ /* flex-wrap bestimmt, ob und wie Zeilen umbrochen werden, wenn die Anordnung nicht passt, nowrap (Standard) | wrap | wrap-reverse */ /* Flex-Wrap:Wrap; */ /* Flex-Flow ist eine Kurzform von Lex-Direction und Flex-Wrap, wie etwa: Row Wrap | Column Wrap-Reverse usw. Der Standardwert ist „row nowrap“, was eine horizontale Anordnung ohne Zeilenumbrüche bedeutet*/ Flex-Flow: Zeilenumbruch; /* !Wenn die Hauptachse horizontal ist! justify-content bestimmt die Ausrichtung des Elements auf der Hauptachse. Mögliche Werte sind flex-start (Standard), flex-end, center, space-between, space-around */ Inhalt ausrichten: zentriert; /* !Wenn die Hauptachse horizontal ist!Bestimmt die Ausrichtung des Elements auf der Querachse. Mögliche Werte sind flex-start|flex-end|center|baseline|stretch */ Elemente ausrichten: zentrieren; Beispiel: Elastisches CSS Flex-Layout (mehrere Divs werden automatisch umbrochen)
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Flexibles Layout</title>
<Stil>
.con {
/* Um einen Flex-Container zu erstellen, fügen Sie einem Element einfach die Eigenschaft „display: flex“ hinzu. */
/* Standardmäßig werden alle direkten untergeordneten Elemente als Flex-Elemente betrachtet und in einer Reihe von links nach rechts angeordnet. */
/*Wenn die Gesamtbreite der Flex-Elemente größer als der Container ist, werden die Flex-Elemente proportional verkleinert, bis sie der Breite des Flex-Containers entsprechen*/
Anzeige: Flex;
/* flex-direction bestimmt die Richtung der Hauptachse row (default) | row-reverse | column | column-reverse*/
/* Flex-Richtung: Zeile; */
/* flex-wrap bestimmt, ob und wie Zeilen umbrochen werden, wenn die Anordnung nicht passt, nowrap (Standard) | wrap | wrap-reverse */
/* Flex-Wrap:Wrap; */
/* Flex-Flow ist eine Kurzform von Lex-Direction und Flex-Wrap, wie etwa: Row Wrap | Column Wrap-Reverse usw. Der Standardwert ist „row nowrap“, was eine horizontale Anordnung ohne Zeilenumbrüche bedeutet*/
Flex-Flow: Zeilenumbruch;
/* !Wenn die Hauptachse horizontal ist! justify-content bestimmt die Ausrichtung des Elements auf der Hauptachse. Mögliche Werte sind flex-start (Standard), flex-end, center, space-between, space-around */
Inhalt ausrichten: zentriert;
/* !Wenn die Hauptachse horizontal ist!Bestimmt die Ausrichtung des Elements auf der Querachse. Mögliche Werte sind flex-start|flex-end|center|baseline|stretch */
Elemente ausrichten: zentrieren;
}
.con > div {
Breite: 100px;
Höhe: 100px;
Hintergrund: #8DB6CD;
Rand: 1px tief schwarz;
Rand links: 10px;
Textausrichtung: zentriert;
Zeilenhöhe: 100px;
}
</Stil>
</Kopf>
<Text>
<div Klasse='con'>
<!-- Der Wert von order ist eine Ganzzahl, der Standardwert ist 0. Je kleiner die Ganzzahl, desto höher ist der Rang des Elements. Hier werden nur item1 und item4 mit dem order-Attribut versehen. 1 und 4 werden am Ende gereiht, und 4 steht vor 1. -->
<div style="order: 2">Artikel 1</div>
<div style="height: 300px;">Element 2</div>
<!-- flex-grow definiert, ob das Element vergrößert werden soll, wenn im Flex-Container zusätzlicher Platz vorhanden ist, und flex-shrink, ob es verkleinert werden soll -->
<div style="flex-grow:2">Element 3</div>
<div style="order: 1">Artikel 4</div>
<div style="flex-basis:60px">Element 5</div>
<div>Punkt 6</div>
<div>Punkt 7</div>
<div>Punkt 8</div>
<div>Punkt 9</div>
<div>Punkt 10</div>
<div>Punkt 11</div>
</div>
</body>
</html>Dies ist das Ende dieses Artikels über den Beispielcode für den automatischen Umbruch bei überlangen CSS-Flex-Layouts. Weitere relevante Inhalte zu überlangen CSS-Flex-Layouts finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: JavaScript implementiert Feuerwerkseffekte mit Soundeffekten
>>: Zusammenfassung der Standardverwendung von HTML-, CSS- und JS-Kommentaren
Artikel empfehlen
Über den Unterschied zwischen der Überprüfung von Elementen und der Anzeige des Quellcodes einer Webseite
Ich weiß nicht, ob Sie bemerkt haben, dass beim Ö...
Detaillierte Erläuterung des MySQL-Kombinationsindex und des ganz links stehenden Übereinstimmungsprinzips
Vorwort Ich habe im Internet schon viele Artikel ...
So fügen Sie Nginx zu den Systemdiensten in CentOS7 hinzu
Einführung Nach dem Kompilieren, Installieren und...
So komprimieren Sie Bilder effektiv mit JS
Inhaltsverzeichnis Vorwort Konvertierungsbeziehun...
Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser
Vom Backend zum Frontend: was für eine Tragödie. A...
Detaillierte Erläuterung der 8 Möglichkeiten zum Übergeben von Parametern in Vue-Routing-Komponenten
Wenn wir eine Single-Page-Anwendung entwickeln, m...
Detaillierte Erläuterung mehrerer Befehle in Linux zum Abrufen detaillierter Hardwareinformationen
In Linux-Systemen, insbesondere Serversystemen, i...
Lösung für mobile Browser, die die Position nicht unterstützen: Fix
Die konkrete Methode ist wie folgt: CSS Code Code...
Drei Lösungen für Unterfunktionen, die auf externe Variablen in JavaScript zugreifen
Vorwort Wenn wir Webseiten schreiben, stoßen wir ...
Windows Server 2019 installieren (grafisches Tutorial)
Windows Server 2019 ist das neueste Server-Betrie...
Implementierung einer Lösung für adaptive Textbereichshöhe in Vue
Inhaltsverzeichnis Versteckte Probleme Lösung zur...
Zusammenfassung von 3 Möglichkeiten zum verzögerten Laden eines Vue-Routers
Kein Lazy Loading verwenden importiere Vue von „v...
So ändern Sie das Root-Passwort in MySQL 5.7
Ab MySQL 5.7 wurden viele Sicherheitsupdates hinz...
So passen Sie die Textgröße im Webdesign an: Kleiner Text, großes Erlebnis
Mit der Verbreitung mobiler Endgeräte wie dem iPa...
Verwenden Sie CSS, um ein dreispaltiges adaptives Layout zu erreichen (feste Breite auf beiden Seiten, adaptiv in der Mitte)
Das sogenannte dreispaltige adaptive Layout bedeu...