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:
Damit die Einstellung dieses Attributs wirksam wird, muss für das übergeordnete Element das Freibox-Attribut display:flex;, der Anordnungsmodus auf horizontale Anordnung flex-direction:row; und der Zeilenumbruch flex-wrap:wrap; gesetzt sein.
Objekt einstellen:

Diese Eigenschaft wirkt sich auf die Elemente innerhalb ihres Containers aus und wird für das übergeordnete Element festgelegt.
Wert:
Strecken: Die Standardeinstellung streckt den von jedem Element im Container eingenommenen Platz und füllt ihn, indem unter jedem Element ein Leerraum hinzugefügt wird. Standardmäßig wird das erste Element von oben im Container angeordnet.

<!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.
initial: Legt das Attribut des Elements auf den standardmäßigen Anfangswert fest.

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

MySQL-Datenbankoptimierung: Indeximplementierungsprinzip und Nutzungsanalyse

Verwendung von „align-content“ im Zeilenumbruchbereich des Flex-Layouts

MySQL-Datenbankoptimierung: Indeximplementierungsprinzip und Nutzungsanalyse

Nginx-Installation und Umgebungskonfiguration unter Windows (Ausführen von Nginx als Dienst)

Drei Beispiele für Node.js-Methoden zum Abrufen von Formulardaten

Webseitenerstellung für Anfänger: Lernen Sie den Umgang mit dem A-Tag für HTML-Hyperlinks

JavaScript Array Methoden - Systematische Zusammenfassung und ausführliche Erklärung

Eine kurze Diskussion über verschiedene Situationen, in denen das Hinzufügen von Indizes zu MySQL nicht wirksam wird

Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 2

Vue implementiert die Bottom-Query-Funktion

Detaillierte Installations- und Konfigurationsschritte für die MySQL 5.7-Zip-Version (Zip-Version)

MySQL-Platzhalter (erweiterte SQL-Filterung)

Artikel empfehlen

Detaillierte Einführung in die Definition und Verwendung des HTML-Thead-Tags

Vue implementiert eine Eingabekomponente, die den Tastenkombinationseffekt der Tastenanzeige erhält

Docker-Compose-Installationsmethode für die YML-Dateikonfiguration

MySQL-Benutzer und -Berechtigungen und Beispiele zum Knacken des Root-Passworts

CSS3-Übergang zur Implementierung eines Benachrichtigungsnachrichtenkarussells

Inaktive Benutzer nach einem Login-Timeout in Linux automatisch abmelden

JavaScript-Closures erklärt

Diagramm zur Installation von MySQL 5.6 unter Windows 7

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.14 (allgemein)

Detaillierte Erklärung zur korrekten Konfiguration von SSL (https-Zertifikat) in Apache unter Ubuntu

Tutorial zur MySQL-SQL-Optimierung: IN- und RANGE-Abfragen

Dateiupload über HTML5 auf Mobilgeräten

So erstellen Sie ein standardisiertes VMware-Image für Kubernetes unter Rancher

Anwendung von HTML und CSS in Flash

Stellen Sie die Nginx+Flask+Mongo-Anwendung mit Docker bereit