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
Tiefes Verständnis von Zeilenhöhe und vertikaler Ausrichtung
Mehrere Konzepte Zeilenbox: Eine Box, die eine In...
Detaillierte Erläuterung der Linux-Befehle „Datei überschreiben“ und „Datei anhängen“
1. Der Unterschied zwischen den Befehlen > und...
Mehr als 100 Zeilen Code zur Implementierung von React Drag Hooks
Vorwort Der Quellcode umfasst insgesamt nur mehr ...
MySQL 8.0.12 Installationskonfigurationsmethode und Kennwortänderung
In diesem Artikel werden die Installations- und K...
Detaillierte Erläuterung der WordPress-Multisite-Konfiguration in der Nginx-Umgebung
Mit der Multisite-Funktion von WordPress können S...
Wenn ein Linux (Ubuntu)-Benutzer N-mal hintereinander ein falsches Passwort eingibt, um sich anzumelden, wird das System automatisch für X Minuten gesperrt
1. Bearbeiten Sie die PAM-Konfigurationsdatei sud...
Docker verwendet CMD- oder ENTRYPOINT-Befehle, um mehrere Dienste gleichzeitig zu starten
Voraussetzung: Celery wird in Django eingeführt. ...
jQuery implementiert das Ausblenden und Anzeigen von HTML-Elementen
Lassen Sie uns die Funktion von Taobao nachahmen,...
Informationen zum CSS-Floating und zum Aufheben des Floatings
Definition von Float Setzt das Element aus dem no...
CSS-Layout-Tutorial: So erreichen Sie eine vertikale Zentrierung
Vorwort Ich habe kürzlich mein Front-End-Wissen z...
Lernen Sie die wichtigsten Kenntnisse, die im Vue-Framework beherrscht werden müssen
1. Was ist Vue Vue ist ein fortschrittliches Fram...
Hinweise zur Adresszuordnung von Gerätetreibern im Linux-Kernel
#include <asm/io.h> #define ioremap(Cookie,...
Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu
Vor einiger Zeit hat der Blogger das Ubuntu-Syste...
Schreiben Sie einen formellen Blog mit XHTML CSS
Der vollständige Name von Blog sollte Weblog sein...
Vue+js: Klicken Sie auf den Pfeil, um die Bilder zu wechseln
In diesem Artikelbeispiel wird der spezifische Co...