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
Konfigurationsprozess für die MySQL-Master-Slave-Replikation
Konfiguration der Hauptbibliothek 1. Konfiguriere...
Detaillierte Erläuterung der zu beachtenden Punkte bei HTML-Standards, die den W3C-Standards entsprechen
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
Schritte der Docker-Lernmethode zum Erstellen des ActiveMQ-Nachrichtendienstes
Vorwort ActiveMQ ist der beliebteste und leistung...
So verwenden Sie worker_threads zum Erstellen neuer Threads in nodejs
Einführung Wie im vorherigen Artikel erwähnt, gib...
Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 2) (Teil 36)
Datensicherung und Wiederherstellung Teil 2, wie ...
jQuery realisiert die Shuttle-Box-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Verwenden Sie Docker, um ein Git-Image mithilfe des Klon-Repositorys zu erstellen
Überblick Ich verwende Docker seit über einem Jah...
Vue/React-Einzelseitenanwendung zurück ohne Aktualisierungslösung
Inhaltsverzeichnis Einführung Warum die Mühe? Com...
Verwenden Sie zum Senden des Formulars ein Bild statt einer Schaltfläche.
Code kopieren Der Code lautet wie folgt: <form...
MySQL-Gleitaggregation/Jahresaggregation – Prinzip und Anwendungsbeispielanalyse
In diesem Artikel werden anhand von Beispielen di...
HTML/CSS-Grundlagen - Einige Vorsichtsmaßnahmen beim Schreiben von HTML-Code (unbedingt lesen)
Die Warnhinweise in diesem Artikel haben nichts m...
Eine kurze Analyse der Prinzipien von NFS-Servern und der Schritte zum Erstellen, Konfigurieren und Bereitstellen dieser
Inhaltsverzeichnis Einführung in den NFS-Dienst W...
So installieren und konfigurieren Sie GitLab unter Ubuntu 20.04
einführen GitLab CE oder Community Edition ist ei...
Detaillierte Erläuterung des Installationsprozesses von MySQL unter Ubuntu 18.04.4
Werfen wir einen Blick auf den Installationsproze...
Tutorial zum Bereitstellen mehrerer Server mit WebAPI und Konfigurieren des Nginx-Lastausgleichs
01PARTCoreWebApi Tutorial Lokale Demonstrationsum...