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
![Rückblick auf die besten Webdesign-Arbeiten 2012 [Teil 1]](/upload/images/67cac324e0a5c.webp)
Artikel empfehlen
Schritte zur Linux-Bridge-Methode zum Überbrücken zweier virtueller VirtualBox-Netzwerke
Dieser Artikel entstand aus meinen Beschwerden üb...
Detaillierte Erklärung der Vuex-Umgebung
Inhaltsverzeichnis Erstellen Sie eine Vuex-Umgebu...
Eine schnelle Lösung für das Problem, dass im entpackten Paket von Windows 64-Bit MySQL 5.7 oder höher kein Datenverzeichnis und keine my-default.ini vorhanden sind und der Dienst nicht gestartet werden kann (Problemübersicht)
Ich bin ein SQL-Anfänger und dachte, die Installa...
Beispielcode für die Verwendung von CSS zur Implementierung des Logistikfortschrittsstils
Wirkung: CSS-Stil: <style type="text/css&...
Auslassungspunkteeffekt anzeigen, wenn der Inhalt einer Tabellenzelle den Wert überschreitet (Implementierungscode)
veranschaulichen Bei der Front-End-Entwicklung tr...
Anfänger lernen einige HTML-Tags (3)
Anfänger, die mit HTML in Berührung kommen, lerne...
Einfache Implementierung von Mini-Vue-Rendering
Inhaltsverzeichnis Vorwort Ziel Erster Schritt: S...
MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Win10
Super ausführliches Tutorial zur Installation und...
Die MySQL-Partitionstabelle ist nach Monaten klassifiziert
Inhaltsverzeichnis Erstellen einer Tabelle Zeigen...
Vue.js implementiert Musikplayer
In diesem Artikel wird der spezifische Code von V...
HTML-Beispielcode zur Implementierung des Tab-Wechsels
Tab-Umschalten ist auch eine gängige Technologie ...
So verwenden Sie den Vue-Video-Player für eine Live-Übertragung
Inhaltsverzeichnis 1. Installieren Sie den Vue-Vi...
React-Implementierungsbeispiel mit Amap (react-amap)
Die PC-Version von React wurde für die Verwendung...
Einige Schlussfolgerungen zur Gestaltung von Portal-Website-Fokusbildern
Fokusbilder sind eine Möglichkeit, Inhalte zu präs...
Implementierungsschritte zum Aktivieren des Docker-Remote-Service-Links auf Cloud CentOS
Hier stellen wir den CentOS-Server mit installier...