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

（這些屬性都是抄別人的）

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

Grundlegende Anwendungsbeispiele für benannte Slots in Vue

Flex-Anordnung in CSS darstellen (Layouttool)

Grundlegende Anwendungsbeispiele für benannte Slots in Vue

Implementierungsmethode und Beispielcode des Tomcat-Klassenladers

Vue importiert Excel-Tabellen und lädt automatisch die Daten herunter, die nicht importiert werden konnten

Detaillierte Erläuterung des Implementierungsprozesses des Docker-Cross-Host-Container-Kommunikations-Overlays

So zeigen Sie Serverhardwareinformationen in Linux an

Erste Schritte Tutorial für Anfänger: Domänennamenauflösung und Bindung

So installieren und konfigurieren Sie die dekomprimierte Version der MySQL-Datenbank unter einem Linux-System

CSS Paint API: Ein CSS-ähnliches Zeichenbrett

So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme

Einführung in den Prozess zum Erstellen einer TCP-Verbindung im Linux-System

Artikel empfehlen

Fehler mit ungerader Breite und Höhe in IE6

Der Unterschied zwischen Name und Wert im Eingabe-Tag

Zusammenfassung der domänenübergreifenden Problembehandlung und -lösungen von Vue

Teilen Sie 101 MySQL-Debugging- und Optimierungstipps

So importieren Sie txt in MySQL unter Linux

JavaScript-Code zur Implementierung eines einfachen Rechners

Grundlegendes Verständnis und Verwendung der HTML-Auswahloption

Installationstutorial auf Unternehmensebene unter Verwendung des LAMP-Quellcodes

So verwenden Sie dl(dt,dd), ul(li), ol(li) in HTML

Detaillierte Erklärung zur Verwendung der benutzerdefinierten Vue-Baumsteuerung

Wann ist die Verwendung von dl, dt und dd sinnvoll?

Detaillierte Erläuterung der Installationsbefehle für Linux-Systemsoftware basierend auf Debian (empfohlen)

Lösen Sie das Problem beim Laden der Vektorkartenquelle in OpenLayers 3

Implementierung eines Web-Rechners auf Basis von JavaScript

So konvertieren Sie Chinesisch in HTML in UTF-8