Neues CSS3-Layout: ausführliche Flex-Erklärung
|
Flex-Grundkonzepte Flex-Layout (Flex ist die Abkürzung für Flexible Box), auch als elastisches Boxmodell bekannt. Der Tag-Stil, in dem das Attribut und der Attributwert (display:flex;) geschrieben werden, ist der Container; alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, sogenannten Elementen. Wenn der Anzeigewert eines Elements flexibel ist, werden alle Elemente (untergeordnete Elemente) in einer Zeile angezeigt. Wenn die Summe der Größen aller Elemente größer als der Container ist, überschreitet sie nicht die Breite und Höhe des übergeordneten Elements. Kein Zeilenumbruch (jedes Element wird automatisch proportional verkleinert).
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<Titel>Layout: Flex</Titel>
<link rel="stylesheet" href="./CSS/normalize.css">
<Stil>
Abschnitt {
Breite: 500px;
Höhe: 800px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
}
</Stil>
</Kopf>
<Text>
<Abschnitt>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</Abschnitt>
</body>
</html>Seiteneffekt: Jeder Container wird proportional verkleinert
Es gibt zwei Arten von CSS-Codes: Einer ist für Container geeignet (Festlegen der Startposition der Hauptachse, Zeilenumbrüche, Ausrichtung der Hauptachse und Ausrichtung mehrerer Achsen); der andere ist für Projekte geeignet (Festlegen der Position des Projekts). Gemeinsame Eigenschaften und Eigenschaftswerte von Containern Da es viele sich wiederholende Codes gibt, werde ich die Codes nicht einzeln hochladen. Sie können dies selbst tun, den Code eingeben und ausprobieren. 1. Legen Sie die Startrichtung der Hauptachsen-Flexrichtung fest: Die Standardeinstellung ist die X-Achse (Zeile):
<Stil>
Abschnitt {
Breite: 500px;
Höhe: 500px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
/* Flex-Richtung: Zeile; */
/* Flex-Richtung: Zeile umkehren; */
/* Flex-Richtung: Spalte; */
/* Flex-Richtung: Spaltenumkehr; */
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
}
</Stil>flex-direction:row; Standardmäßig ist die Startrichtung der X-Achse die Startposition (von links nach rechts platziert); flex-direction:row-reverse; Ändert die Startrichtung der X-Achse zur Endposition (von rechts nach links platziert);
Legen Sie die Startrichtung der Hauptachse auf die Y-Achse (Spalte) fest: flex-direction:column; Standardmäßig ist die Startrichtung der Y-Achse die Startposition (von oben nach unten platziert) flex-direction:column-reverse; Ändert die Startrichtung der Y-Achse zur Endposition (von unten nach oben platziert)
2. Legen Sie fest, ob das Element mit Flex-Wrap umbrochen werden soll: (Standard ist kein Wrap)
<Stil>
Abschnitt {
Breite: 400px;
Höhe: 400px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
/* flex-wrap: umwickeln; */
/* Flex-Wrap: Wrap-Reverse; */
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
}
</Stil>flex-wrap: nowrap; Der Standardwert ist kein Zeilenumbruch; (n Elemente werden in einer Zeile angezeigt. Wenn die Summe der Elementgrößen größer als die Größe der Hauptachse des Containers ist, werden die Elemente automatisch entsprechend verkleinert.) (Siehe erste Codepage-Ergebnisanzeige) flex-wrap: wrap; Zeilenumbruch setzen; (Überschreitet es die Breite der Hauptachse, wird es umgebrochen. Nach dem Zeilenumbruch entsteht zwischen den beiden Zeilen eine Lücke, da in vertikaler Richtung noch Platz übrig ist, der oberhalb und unterhalb der zweiten Zeile gleichmäßig verteilt wird)
flex-wrap: Wrap-Reverse; in umgekehrter Reihenfolge umbrechen; (wenn es zwei Zeilen gibt, wird die zweite Zeile vorne und die erste Zeile hinten angezeigt)
3. Ausrichtung der Hauptachsenrichtung: justify-content: Ein Projekt ist ein:
<Stil>
Abschnitt {
Breite: 400px;
Höhe: 400px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
/* Inhalt ausrichten: Flex-Start; */
/* Inhalt ausrichten: Flex-Ende; */
/* Inhalt ausrichten: zentriert; */
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
}
</Stil>justify-content:flex-start; An der Startrichtung der Hauptachse ausrichten (Standard) justify-content:flex-end; An der Endrichtung der Hauptachse ausrichten
justify-content:center; die Hauptachse ist zentriert
Wenn das Projekt aus mehreren Projekten besteht:
<Stil>
Abschnitt {
Breite: 500px;
Höhe: 500px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
/* Inhalt ausrichten: Leerzeichen dazwischen; */
/* Inhalt ausrichten: Leerzeichen drumherum; */
/* Inhalt ausrichten: gleichmäßiger Abstand; */
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
}
</Stil>justify-content: space-between; Beide Enden ausrichten (das erste Element steht am Anfang des Containers, das letzte Element steht am Ende des Containers und der Abstand dazwischen ist gleich)
justify-content: space-around; Verteilte Ausrichtung
Inhalt ausrichten: Abstand gleichmäßig verteilen; den verbleibenden Platz gleichmäßig aufteilen und den Abstand zwischen den einzelnen Elementen gleich halten
4. Ausrichtung der Hauptachse zur Querachsenrichtung Eine Achse: Die Hauptachse muss in die Y-Achse geändert werden: flex-direction: column; align-items: baseline; An der Grundlinie der ersten Textzeile im Element ausrichten align-items: stretch; (Wenn dem Element keine Höhe zugewiesen wird, ist „stretch“ der Standardwert. Wenn für das Element keine Höhe festgelegt ist, wird die Höhe des Containers verwendet.)
<Stil>
Abschnitt {
Breite: 500px;
Höhe: 500px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
/* Die Hauptachse muss in die Y-Achse geändert werden und die Elemente werden in Spalten platziert*/
Flex-Richtung: Spalte;
/* align-items: flex-start; Standardplatzierung*/
/* Elemente ausrichten: zentrieren; */
/* Elemente ausrichten: Flex-Ende; */
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
}
</Stil>align-items: flex-start; die Querachse wird von der Startposition aus ausgerichtet align-items: center; Richtet die Querachse auf die Mitte aus
align-items: flex-end; die Querachse wird von der Endposition aus ausgerichtet
Mehrere Achsen: (Die Summe der Größen aller Elemente muss größer sein als die Größe des Containers, damit die Elemente umschlossen und angezeigt werden können.)
<Stil>
Abschnitt {
Breite: 500px;
Höhe: 500px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
Flex-Richtung: Spalte;
Flex-Wrap: Umwickeln;
/* Inhalt ausrichten: zentriert; */
/* Inhalt ausrichten: Flex-Ende; */
/* Inhalt ausrichten: Leerzeichen dazwischen; */
/* Inhalt ausrichten: Leerzeichen herum; */
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
}
</Stil>align-content: flex-start; die Querachse wird von der Startposition aus ausgerichtet align-content: center; Querachse auf die Mitte ausrichten
align-content: flex-end; die Querachse wird von der Endposition aus ausgerichtet
align-content: space-between; Richtet beide Enden der Querachse aus
align-content: space-around; achsenübergreifende verteilte Ausrichtung
align-content: space-evenly; Querachse gleichmäßig verteilen
Die Eigenschaften und Eigenschaftswerte des Projektes: 1. Die Reihenfolge bestimmt die Position der Elemente Bestellung: 1; Wert: positiv oder negativ (Standardwert ist 0) Je kleiner der Wert, desto weiter vorne liegt er, und je größer der Wert, desto weiter hinten liegt er. (Anwendbare Szenarien: 1. Suchmaschinenoptimierung, SEO verbessern und wichtige Informationen an den Anfang des HTML-Codes setzen, ohne das Layout zu beeinträchtigen. 2. Projektposition anpassen)
<Stil>
Abschnitt {
Breite: 500px;
Höhe: 500px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
}
div:n-tes-Kind(4) {
Reihenfolge: -1;
}
</Stil>
Legen Sie die Ausrichtung eines oder mehrerer [Elemente] auf der Querachse fest:
<Stil>
Abschnitt {
Breite: 800px;
Höhe: 400px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
}
div:n-tes-Kind(2) {
selbst ausrichten: zentrieren;
}
div:n-tes-Kind(3) {
selbst ausrichten: Ende flexen;
}
</Stil>align-self: flex-start; Legt fest, dass das Element am Anfang der Querachse platziert werden soll (Standardposition) align-self: center; Legt fest, dass das Element auf der Querachse zentriert wird align-self: flex-end; Legt fest, welches Element am Ende der Querachse platziert werden soll
Stellen Sie den Vergrößerungsfaktor eines oder mehrerer Elemente ein Bedingung: Die Summe der Größen aller Elemente muss kleiner sein als die Größe des Containers (wenn kein Platz mehr vorhanden ist, hat das Setzen dieser Eigenschaft keine Wirkung.) Ein Element hat eine Flex-Grow-Eigenschaft
<Stil>
Abschnitt {
Breite: 800px;
Höhe: 400px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
}
div:n-tes-Kind(2) {
Flex-Wachstum: 1;
}
</Stil>
Mehrere Elemente haben Flex-Grow-Attribute
<Stil>
Abschnitt {
Breite: 800px;
Höhe: 200px;
Rand: 2px tief schwarz;
Rand: 50px automatisch;
Anzeige: Flex;
Box-Größe: Rahmenbox;
}
div {
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgezogene Tomate;
Box-Größe: Rahmenbox;
}
div:n-tes-Kind(2) {
Flex-Wachstum: 1;
}
div:n-tes-Kind(4) {
Flex-Wachstum: 2;
}
</Stil>Effektanzeige
Teilen Sie den verbleibenden Speicherplatz des Containers in die entsprechende Anzahl von Flex-Grow-Anteilen auf und verteilen Sie ihn dann entsprechend der Anzahl der Anteile jedes Elements auf die Elemente mit Flex-Grow-Attributen. Kurz gesagt: Flex ist sehr bequem zu verwenden und kann sowohl auf responsive Layouts als auch auf Holy-Grail-Layouts angewendet werden. Es gibt einfach viele Eigenschaften, also müssen Sie immer mehr üben. Ich glaube, Sie werden Flex schnell gekonnt einsetzen können. Ich empfehle ein kleines Spiel, das sehr interessant ist und den Einsatz von Flex verbessern kann: Flexbox Froggy http://blog.xiaoboswift.com/flexbox/#zh-cn Geh und hilf dem kleinen Frosch, nach Hause zu gehen~~ Zusammenfassen Dies ist das Ende dieses Artikels über das neue Layout von CSS3: detaillierte Erläuterung von Flex. Weitere relevante Inhalte zum CSS-Flex-Layout 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! |
<<: Spezifische Verwendung von MySQL-Globalsperren und Sperren auf Tabellenebene
>>: Beispiele für die Verwendung von HTML-Marquee-Tags
Artikel empfehlen
Grafisches Tutorial zur Installation von mysql5.7.17.msi
mysql-5.7.17.msi Installation, folgen Sie den Scr...
Zusammenfassung der drei Regeln für die React-Statusverwaltung
Inhaltsverzeichnis Vorwort Nr.1 Ein Fokus Nr. 2 E...
Verwendung des Linux-Befehls chkconfig
1. Befehlseinführung Der Befehl chkconfig wird zu...
So installieren Sie Docker unter Windows Server 2016
Kürzlich hat Microsoft Windows Server 2016 veröff...
Schreiben Sie einen formellen Blog mit XHTML CSS
Der vollständige Name von Blog sollte Weblog sein...
Detaillierte Erklärung der Mixin-Verwendung in Vue
Inhaltsverzeichnis Vorwort 1. Was sind Mixins? 2....
Detaillierte Erläuterung der Verwendung des DockerHub-Image-Repository
Bisher wurden die von uns verwendeten Images alle...
Detaillierte Schritte zum Verpacken und Hochladen von Spring Boot in ein Docker-Repository
Wichtiger Hinweis: Bevor Sie diesen Artikel lesen...
Bildschirmbefehl und Verwendung unter Linux
Bildschirmeinführung Screen ist eine vom GNU-Proj...
So erhalten Sie die Schnittmenge/Differenz/Vereinigung zweier Mengen in MySQL
Typische MySQL-Szenarien: Schnittmenge und Differ...
MySQL 8.x MSI-Version Installations-Tutorial mit Bildern und Text
1. MySQL herunterladen Offizielle Website-Downloa...
Vue-Formulareingabebindung V-Modell
Inhaltsverzeichnis 1.v-Modell 2. Bindungseigensch...
Anwendung von CSS3-Animationseffekten in Aktivitätsseiten
Hintergrund Ehe wir uns versehen, neigt sich ein ...
Perfekte Lösung für das Problem, dass Daten abgeschnitten werden, wenn die Funktion „group concat“ in Mysql5.7 verwendet wird
Vorgestern stieß ich in der Produktionsumgebung a...
Grundlegendes Tutorial zur Steuerung des mobilen Roboters Turtlebot3 mit ROS
Chinesisch-Tutorial https://www.ncnynl.com/catego...