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
Slot-Anordnung und Nutzungsanalyse in Vue
Die Betriebsumgebung dieses Tutorials: Windows 7-...
js realisiert die Lupenfunktion der Shopping-Website
In diesem Artikel wird der spezifische Code von j...
Zabbix überwacht Linux-Hosts basierend auf SNMP
Vorwort: Der Linux-Host ist relativ einfach zu ha...
IIS und APACHE implementieren die HTTP-Umleitung auf HTTPS
IIS7 Laden Sie das HTTP Rewrite-Modul von der off...
Benutzerdefinierte Tabbar-Komponente für das WeChat-Applet
In diesem Artikel wird der spezifische Code der b...
Docker-Compose erstellt schnell Schritte für ein privates Docker-Warehouse
Erstellen Sie docker-compose.yml und füllen Sie d...
Lösung für das Routing-Hervorhebungsproblem von Vue-Komponenten
Vorwort Früher habe ich den Cache verwendet, um d...
Wichtige Tools für das Webdesign: Tutorial zum CSS-Tool-Set für das Firefox Web Developer-Plugin
Das Plugin wird im Firefox-Browser installiert. D...
Implementierung von dynamischem REM für mobiles Layout
Dynamische REM 1. Lassen Sie uns zunächst die akt...
js implementiert das klassische Minesweeper-Spiel
In diesem Artikelbeispiel wird der spezifische Co...
Allgemeine Symbole in Unicode
Unicode ist ein von einer internationalen Organis...
So installieren Sie nginx unter Linux
Nginx wurde in der Programmiersprache C entwickel...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 (Windows)
1. Laden Sie die Software herunter 1. Gehen Sie a...
Eine kurze Diskussion darüber, ob CSS-Animationen durch JS blockiert werden
Der Animationsteil von CSS wird von JS blockiert,...
Detaillierte Erläuterung des Replikationskonfigurationsbeispiels zwischen MySQL-Containern
Hintergrund Letzte Woche hat das Unternehmen eine...