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
So vergleichen Sie zwei Datenbanktabellenstrukturen in MySQL
Während des Entwicklungs- und Debugging-Prozesses...
So übergeben Sie den Wert des Auswahl-Dropdown-Felds an die ID, um den Code zu implementieren
Der vollständige Code lautet wie folgt : HTML Quel...
Vue.js-Framework implementiert Warenkorbfunktion
In diesem Artikel wird der spezifische Code des V...
Lösung für EF (Entity Framework)-Einfüge- oder Aktualisierungsfehler
Fehlermeldung: Die Store-Update-, Insert- oder De...
Praktisches Tutorial zum Ändern des MySQL-Zeichensatzes
Vorwort: In MySQL unterstützt das System viele Ze...
So ändern Sie das Passwort des Root-Benutzers in MySQL
Methode 1: Verwenden Sie den Befehl SET PASSWORD ...
Das Installationstutorial zu mysql5.5.28 ist super detailliert!
mysql5.5.28 Installations-Tutorial zu Ihrer Infor...
Erste Schritte mit Nginx Reverse Proxy
Inhaltsverzeichnis Überblick Die Rolle des Revers...
MYSQL Eine Frage zur Verwendung von Zeichenfunktionen zum Filtern von Daten
Problembeschreibung: Struktur: test hat zwei Feld...
Detaillierte Erläuterung des Installationsprozesses von Jenkins auf CentOS 7
Installieren Sie Jenkins über Yum 1. Installation...
Zusammenfassung der Überlegungen zum Schreiben von Web-Frontend-Code
1. Am besten fügen Sie vor dem HTML-Tag einen Satz...
So installieren Sie den MySQL 5.7.28-Binärmodus unter CentOS 7.4
Linux-Systemversion: CentOS7.4 MySQL-Version: 5.7...
Detaillierte Erklärung zum Einrichten eines DNS-Servers unter Linux
1. DNS-Server-Konzept Die Kommunikation im Intern...
Docker-Container erklärt ausführlich, wie man das Image vereinfacht und die Größe reduziert
Inhaltsverzeichnis 1. Reduzieren Sie die Anzahl d...
Detaillierte Untersuchung des MySQL-Verbundindex
Ein zusammengesetzter Index (auch gemeinsamer Ind...