Verwendung von „align-content“ im Zeilenumbruchbereich des Flex-Layouts
|
1. Das in diesem Artikel implementierte Effektdiagramm sieht wie folgt aus: Auf der rechten Seite des Layouts wird Flex-Layout verwendet, und wenn mehr als 3 Zeilen vorhanden sind, werden sie umbrochen.
Der Code des übergeordneten Elements lautet wie folgt: .nav-rechts Breite: 75 %; Polsterung: 10px; Anzeige: Flex; /* Standardmäßig horizontal*/ flex-direction: row;/*Anordnungsrichtung der untergeordneten Elemente festlegen*/ flex-wrap: wrap;/*Bei Überlauf umbrechen*/ } Der Unterelementcode lautet wie folgt:
.nav-rechts-item{
Breite: 33,33 %;
Höhe: 120px;
Textausrichtung: zentriert;
}
Das Ergebnis ist jedoch nicht wie erwartet. Zwischen den Zeilen befinden sich Leerzeichen.
Die Lösung besteht darin, align-content:flex-start zum übergeordneten Element hinzuzufügen .nav-rechts Breite: 75 %; Polsterung: 10px; Anzeige: Flex; Flex-Richtung: Reihe; Flex-Wrap: Umwickeln; align-content: flex-start/*Löscht den Leerraum zwischen untergeordneten Elementen und platziert die Elemente oben im Container. */ } Inhalt ausrichten Wirkung: Dadurch wird die vertikale Anordnung jedes Elements innerhalb der freien Box festgelegt. Zustand: Diese Eigenschaft wirkt sich auf die Elemente innerhalb ihres Containers aus und wird für das übergeordnete Element festgelegt.
<!DOCTYPE=html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<Titel>
Inhalt ausrichten
</Titel>
<Stil>
#Vater{
Breite: 200px;
Anzeige: Flex;
Flex-Richtung: Zeile;
flex-wrap:wrap;
Inhalt ausrichten: strecken;
Höhe: 200px;
Hintergrundfarbe: grau;
}
.son1{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: orange;
}
.son2{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: rot;
}
.son3{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: #08a9b5;
}
</Stil>
</Kopf>
<Text>
<div id="Vater">
<div Klasse="son1">q</div>
<div Klasse="son2">w</div>
<div Klasse="son3">e</div>
<div Klasse="son3">e</div>
<div Klasse="son3">e</div>
</div>
</body>
</html>Zentriert: Dadurch werden die Leerzeichen zwischen den Elementen entfernt und alle Elemente vertikal zentriert.
<!DOCTYPE=html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<Titel>
Informationen zum Testen von Dokumentelementen</title>
<Stil>
#Vater{
Breite: 200px;
Anzeige: Flex;
Flex-Richtung: Zeile;
flex-wrap:wrap;
Inhalt ausrichten: zentriert;
Höhe: 200px;
Hintergrundfarbe: grau;
}
.son1{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: orange;
}
.son2{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: rot;
}
.son3{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: #08a9b5;
}
.son4{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: #9ad1c3;
}
.son5{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: RGB (21,123,126);
}
</Stil>
</Kopf>
<Text>
<div id="Vater">
<div Klasse="son1">q</div>
<div Klasse="son2">w</div>
<div Klasse="son3">e</div>
<div Klasse="son4">e</div>
<div Klasse="son5">e</div>
</div>
</body>
</html>
Flex-Start: Dadurch wird der Leerraum zwischen den Elementen entfernt und die Elemente oben im Container platziert.
<!DOCTYPE=html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<Titel>
Informationen zum Testen von Dokumentelementen</title>
<Stil>
#Vater{
Breite: 200px;
Anzeige: Flex;
Flex-Richtung: Zeile;
flex-wrap:wrap;
Inhalt ausrichten: Flex-Start;
Höhe: 200px;
Hintergrundfarbe: grau;
}
.son1{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: orange;
}
.son2{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: rot;
}
.son3{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: #08a9b5;
}
.son4{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: #9ad1c3;
}
.son5{
Höhe: 30px;
Breite: 100px;
Hintergrundfarbe: RGB (21,123,126);
}
</Stil>
</Kopf>
<Text>
<div id="Vater">
<div Klasse="son1">q</div>
<div Klasse="son2">w</div>
<div Klasse="son3">e</div>
<div Klasse="son4">e</div>
<div Klasse="son5">e</div>
</div>
</body>
</html>
Flex-End: Dadurch wird der Leerraum zwischen den Elementen entfernt und die Elemente am Boden des Containers platziert. Inhalt ausrichten: Flex-Ende;
space-between: Dadurch werden die Elemente vertikal ausgerichtet. Das heißt, das obere Element wird an der Oberseite des Containers ausgerichtet und das untere Element an der Unterseite des Containers. Lassen Sie zwischen den einzelnen Elementen den gleichen Abstand. Inhalt ausrichten:Abstand zwischen;
space-around: Dadurch bleibt über und unter jedem Element der gleiche Abstand, sodass der Abstand zwischen den Elementen doppelt so groß ist wie der Abstand eines einzelnen Elements. Inhalt ausrichten: Abstand herum;
erben: Bewirkt, dass das Element diese Eigenschaft von seinem übergeordneten Element erbt. Hinweis: Ein Teil des Codes in diesem Artikel stammt aus der ausführlichen Erklärung des align-content-Attributs in CSS Dies ist das Ende dieses Artikels über die Verwendung von Align-Content in Flex-Layout-Zeilenumbrüchen und Leerzeichen. Weitere Informationen zu Flex-Zeilenumbrüchen und Leerzeichen 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! |
<<: Mysql-Datumsformatierung und komplexe Datumsbereichsabfrage
>>: Das obere feste Div kann auf einen halbtransparenten Effekt eingestellt werden
Artikel empfehlen
Detaillierte Erläuterung der Systemeingabe- und -ausgabeverwaltung in Linux
Verwaltung der Ein- und Ausgaben im System 1. Ver...
So entfernen Sie in Linux ganz einfach installierte Quellpakete
Schritt 1: Stow installieren In diesem Beispiel v...
JS-Version des Bildlupeneffekts
In diesem Artikel wird der spezifische JS-Code zu...
So verwenden Sie Node-Scaffolding zum Erstellen eines Servers zur Implementierung der Token-Verifizierung
Inhalt Verwenden Sie Scaffolding, um schnell ein ...
Implementierungscode der Funktion zur Benutzervorschauzeitüberwachung der Vue-Seite
In einem aktuellen Unternehmen besteht die Anford...
Anwendungsszenarien und Lösungen für die MySQL-Komprimierung
Einführung Beschreibt die Anwendungsfälle und Lös...
Analyse des kumulativen Aggregationsprinzips von MySQL und Anwendungsbeispiele
Dieser Artikel veranschaulicht anhand von Beispie...
Eine kurze Zusammenfassung aller Kapselungsmethoden in Vue
Inhaltsverzeichnis 1. Kapselungs-API 2. Globale T...
Detaillierte Erklärung zur korrekten Verwendung der if-Funktion in MySQL
Für das, was ich heute schreiben werde, lief das ...
Verstehen Sie die Verwendung von benutzerdefinierten Anweisungen für Vue2.x und Vue3.x und das Prinzip der Hook-Funktionen
Inhaltsverzeichnis Vue2.x-Nutzung Globale Registr...
Zusammenfassung von 6 Lösungen zur Implementierung des Singleton-Modus in JS
Vorwort Heute habe ich das Erzeugungsmuster im En...
Ich habe einige Websites zum Thema Wohndesign herausgesucht, die ich für gut halte.
<br />Ich habe einige Websites zum Thema Woh...
MySQL-8.0.26 Konfigurationsgrafik-Tutorial
Vorwort: Vor kurzem hat das Unternehmensprojekt d...
Wie verstecke ich den Text im A-Tag und zeige das Bild an? Kompatibel mit 360-Grad-Rendering
Oftmals werden Sie auf einen <a>-Tag-Stil st...
Das Textdesign einer Webseite sollte aussehen wie die Kleidung von intelligenten Mädchen
<br />„Es gibt keine hässlichen Frauen auf d...