Flex-Anordnung in CSS darstellen (Layouttool)
|
In Bezug auf die Anzeige: flexibles Layout: Manche Leute haben ein tiefes Verständnis davon und ich habe auch aus der Arbeit anderer gelernt. Anzeige: Ich habe keine Ahnung, was Flex-Layout ist oder welche Grundkonzepte es hat, ich weiß nur, wie man es verwendet. Immer wenn ich so etwas wie ein Konzept sehe, werfe ich nur einen flüchtigen Blick darauf. Erste Eigenschaft und Verwendung: Flex-Richtung Es gibt 4 Methoden, die ich kenne: Reihe (horizontale Anordnung), Reihe-umgekehrt (horizontale umgekehrte Anordnung), Spalte (vertikale Anordnung), Spalte-Reserve (vertikale umgekehrte Anordnung)
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
</Kopf>
<Text>
<div Stil="width:300px;border:1px solid red;display: flex;flex-direction: row;">
<div style="Breite: 100px;Höhe: 100px;Hintergrundfarbe: schwarz;"></div>
<div Stil="Breite: 100px;Höhe: 100px;Hintergrundfarbe: grün;"></div>
<div Stil="Breite: 100px;Höhe: 100px;Hintergrundfarbe: gelb;"></div>
<div Stil="Breite: 100px;Höhe: 100px;Hintergrundfarbe: blau;"></div>
</div>
</body>
</html>
Der obige Code und das Effektdiagramm zeigen die Effekte, wenn das Attribut eine Zeile ist Hinweis: Obwohl die Breite festgelegt ist, beträgt der übergeordnete Container nur 300 Pixel, und das untergeordnete Div kann 100 Pixel nicht erreichen, passt sich jedoch dem übergeordneten Container an Ersetzen Sie einfach den Code „flex-direction: row“ durch „flex-direction: row-revese“ oder „flex-direction: column“ oder „flex-direction: column-reserve“, um unterschiedliche Effekte zu erzielen. Hier ist das Wirkungsdiagramm:
Reihe umkehren ---------
Spalte ---------
Spaltenumkehr --------- Die zweite Eigenschaft und Verwendung: Flex-Wrap Dies sind die Zeilenumbrucheigenschaften: nowrap (kein Zeilenumbruch), wrap (Zeilenumbruch), wrap-reverse (Richtungszeilenumbruch)
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
</Kopf>
<Text>
<div Stil="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
<div style="Breite: 100px;Höhe: 100px;Hintergrundfarbe: schwarz;"></div>
<div Stil="Breite: 100px;Höhe: 100px;Hintergrundfarbe: grün;"></div>
<div Stil="Breite: 100px;Höhe: 100px;Hintergrundfarbe: gelb;"></div>
<div Stil="Breite: 100px;Höhe: 100px;Hintergrundfarbe: blau;"></div>
</div>
</body>
</html>
Dies ist das Code- und Wirkungsdiagramm des Zeilenumbruchs --------- Ersetzen Sie die Eigenschaft „flex-wrap: wrap“ durch „nowrap“ (kein Zeilenumbruch) und „wrap-reverse“ (Richtungszeilenumbruch), um den folgenden Effekt zu erzielen:
jetztrap -----
Wrap-Rückseite --------- Das dritte Attribut und die Verwendung: justify-content Enthält Eigenschaften: Flex-Start (Standard): linksbündig;
Linksbündig Flex-Ende: rechtsbündig
Rechtsbündig Mitte: zentriert;
Zentrierte Ausrichtung, Abstand zwischen: Richten Sie beide Enden mit gleichem Abstand zwischen den Elementen aus.
Ausrichtung „space-around“: Der Abstand auf beiden Seiten jedes Elements ist gleich, d. h. der Abstand zwischen den Elementen ist doppelt so groß wie der Abstand zwischen Elementen und Rändern.
Der Abstand zwischen den beiden Seiten ist gleich. Ich, Xiaobai, habe dort auch viele Dinge gestohlen. Zusammenfassen Oben finden Sie eine Einführung des Editors in die flexible Anzeigeorganisation (Layout-Tool) in CSS. Ich hoffe, es wird Ihnen hilfreich sein! |
<<: Schritte zum Verpacken und Konfigurieren von SVG-Komponenten in Vue-Projekten
>>: Unvollständige Lösung für die Verwendung von Eingabetyp=Textwert=str
Artikel empfehlen
So verwenden Sie React-Color zum Implementieren des Front-End-Farbwählers
Hintergrund Wir können react-color verwenden, um ...
Spezielle Methode zum Hinzufügen von Fremdschlüsseleinschränkungen in MySQL
Die Betriebsumgebung dieses Tutorials: Windows 7-...
In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 2)
Mit dem obigen Artikel habe ich meine Einführung i...
Neue Funktionen von JS ES: Einführung in Erweiterungsoperatoren
1. Spread-Operator Der Spread-Operator besteht au...
So verwenden Sie Tinymce in Vue3.0+ und implementieren die Funktion zum Hochladen mehrerer Bilder und zum Bearbeiten der Formel zum Hochladen von Dateien
Zugehörige Dokumente Ein Teil dieses Artikels wir...
Datenstruktur - Baum (III): Mehrweg-Suchbaum B-Baum, B+ Baum
Mehrweg-Suchbaum Höhe eines vollständigen Binärba...
Eine kurze Analyse der Unterschiede zwischen Undo, Redo und Binlog in MySQL
Inhaltsverzeichnis Vorwort 【Protokoll rückgängig ...
Durch das flexible Layout können Unterelemente ihre eigene Höhe beibehalten
Beim Verwenden des Flex-Layouts werden Sie festst...
Was sind Web Slices?
Neue Funktion von IE8: Web Slices (Web Slices) Mi...
Beispiel für die Validierung eines JavaScript-Formulars
HTML-Formulare werden häufig verwendet, um Benutz...
Installationshandbuch für die MySQL 5.7.18-Version (einschließlich Binärdateiversion)
Der Installationsvorgang ist im Grunde derselbe w...
So steigern Sie Ihre Web-Performance um das Dreifache, indem Sie einen Parameter in Nginx aktivieren
1. Einige aufgetretene Probleme Ich erinnere mich...
Analysieren Sie die Probleme der SQL-Anweisungseffizienzoptimierung beim Lesen, Schreiben, Indizieren und anderen Vorgängen in MySQL-Tabellen
Letztes Mal haben wir über einige SQL-Abfrageopti...
Der Prozess der Einrichtung einer Umgebung für Integrationstests mit Remote-Docker
Nachfragehintergrund Das Team muss Integrationste...
So fügen Sie einer großen Datentabelle in MySQL Felder hinzu
Vorwort Ich glaube, jeder ist mit dem Hinzufügen ...