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
Allgemeines Startskriptbeispiel für ein Linux-Java-Programm
Allerdings ist die Häufigkeit des Shell-Starts se...
LayUI+Shiro implementiert ein dynamisches Menü und erinnert sich an das Beispiel der Menüerweiterung
Inhaltsverzeichnis 1. Maven-Abhängigkeit 2. Menüb...
Verwendung von relativen und absoluten Pfaden unter Linux
01. Übersicht Absolute und relative Pfade kommen ...
Erläuterung der MySQL-Indexoptimierung
Bei unserer täglichen Arbeit führen wir manchmal ...
JavaScript zum Erzielen eines Dropdown-Menüeffekts
Verwenden Sie Javascript, um ein Dropdown-Menü zu...
Die häufigste Deklarationszusammenführung in TS (Schnittstellenzusammenführung)
Inhaltsverzeichnis 1. Schnittstelle zusammenführe...
Wie wird eine SQL-Anweisung in MySQL ausgeführt?
Inhaltsverzeichnis 1. Analyse der MySQL-Architekt...
So zeigen Sie den Speicherort von MySQL-Datendateien an
Wir haben möglicherweise eine Frage: Nachdem wir ...
So erstellen Sie mit Dockerfile ein Spiegelbild der Java-Laufzeitumgebung
Die aktuelle Umgebung ist: Centos 7.5 docker-ce 1...
Detaillierte Erklärung der integrierten Methoden des Javascript-Arrays
Inhaltsverzeichnis 1. Array.at() 2. Array.copyWit...
Deaktivierte Werte, die nicht eingegeben werden können, können nicht an die Aktionsebene übergeben werden
Wenn ich das Formular eingabeunfähig machen möchte...
Der gesamte Prozess der Installation von mysql5.7.22 unter der ARM64-Architektur
MySQL-Download-Adresse: https://obs.cn-north-4.my...
Designreferenz Schönes und originelles Blog-Design
Alle unten aufgeführten Blogs sind originell und ...
Schritte der MySQL-Methode zum Bestimmen, ob es sich um eine Teilmenge handelt
Inhaltsverzeichnis 1. Problem 2. Lösung Option 1:...
Wie kann man dafür sorgen, dass Leerzeichen in IE und FF die gleiche Breite haben?
body{font-size:12px; font-family:"Schriftart...