Kommen wir ohne weitere Umschweife direkt zum Code: 1. Oberes, mittleres und unteres Layout: <!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0"> <title>Dokument</title> <Stil> Körper { Position: absolut; links: 0; rechts: 0; oben: 0; unten: 0; Polsterung: 0; Rand: 0; Anzeige: Flex; Flex-Richtung: Spalte; } .header, .footer { Höhe: 50px; } .Körper { Flex-Wachstum: 1; Hintergrundfarbe: #DDD; } </Stil> </Kopf> <Text> <div class="header">Kopfzeile</div> <div class="body">Inhalt</div> <div class="footer">Fußzeile</div> </body> </html> Der Anzeigeeffekt ist wie folgt: 2. Linkes und rechtes Layout: <!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0"> <title>Dokument</title> <Stil> Körper { Position: absolut; links: 0; rechts: 0; oben: 0; unten: 0; Polsterung: 0; Rand: 0; Anzeige: Flex; } .links rechts { Höhe: 100%; } .links { Breite: 250px; Hintergrundfarbe: rgba(255,0,0,0,3); } .Rechts { Anzeige: Flex; Flex-Richtung: Spalte; } .header, .footer { Höhe: 50px; } .rechts, .inhalt { Flex-Wachstum: 1; } .Inhalt { Hintergrundfarbe: #DDD; } </Stil> </Kopf> <Text> <div class="left">LinkeNavigation</div> <div Klasse="rechts"> <div class="header">Kopfzeile</div> <div class="content">Inhalt</div> <div class="footer">Fußzeile</div> </div> </body> </html> Der Seiteneffekt ist wie folgt: Hier sind einige wichtige Stile, mit denen Sie jedes gewünschte Layout entwerfen können: flex-grow: 1; // Gibt an, dass das untergeordnete Element den verbleibenden Platz einnimmt, wenn die Breite der Hauptachse des Containers überzählig ist. Position: absolut; links: 0; rechts: 0; oben: 0; unten: 0; // Mit diesem Stilsatz kann das Element das positionierte übergeordnete Element vollständig einnehmen. Damit ist dieser Artikel über Beispielcode zur einfachen Implementierung des Seitenlayouts mit Flex-Layout abgeschlossen. Weitere relevante Inhalte zum Flex-Seitenlayout finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Detaillierte Analyse der MySQL-Indexdatenstruktur
>>: Detaillierte Erklärung der grundlegenden Verwendung des img-Bild-Tags in HTML/XHTML
Ich denke, Editoren lassen sich in zwei Kategorie...
Installieren Sie das SSH-Tool 1. Öffnen Sie das T...
Ein cooler JavaScript-Code, um Weibo-Benutzern st...
Der Hauptteil der Seite: <body> <ul id=&...
Inhaltsverzeichnis 1. Vorverarbeitung 2. Vorbehan...
Inhaltsverzeichnis Anforderungen aus der Projektp...
Frage: Ich habe in Vue ein Formular zum Hochladen...
Heute habe ich zufällig einem Freund beim Umzug s...
Der Zweck der Cache-Verwendung besteht darin, den...
Codebeispiel: öffentliche Klasse JDBCDemo3 { öffe...
Inhaltsverzeichnis verwendenMemo useCallback verw...
Inhaltsverzeichnis Variable Datentypen Erweiterun...
Inhaltsverzeichnis 1. Requisiten Übergeordnetes E...
Mac wird mit Apache-Umgebung geliefert Öffnen Sie...
1. Docker auf dem Server installieren yum install...