Beispielcode zur einfachen Implementierung des Seitenlayouts mit Flex-Layout

Beispielcode zur einfachen Implementierung des Seitenlayouts mit Flex-Layout

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

Artikel empfehlen

Teilen Sie einen auf Ace basierenden Markdown-Editor

Ich denke, Editoren lassen sich in zwei Kategorie...

So installieren und konfigurieren Sie den SSH-Dienst in Ubuntu 18.04

Installieren Sie das SSH-Tool 1. Öffnen Sie das T...

JavaScript-Code zur Implementierung der Weibo-Batch-Unfollow-Funktion

Ein cooler JavaScript-Code, um Weibo-Benutzern st...

Spezifische Verwendung der MySQL-Vorbereitungsvorverarbeitung

Inhaltsverzeichnis 1. Vorverarbeitung 2. Vorbehan...

Vue Router lädt verschiedene Komponenten je nach Hintergrunddaten

Inhaltsverzeichnis Anforderungen aus der Projektp...

So handhaben Sie Bilder in Vue-Formularen

Frage: Ich habe in Vue ein Formular zum Hochladen...

Detailliertes Tutorial zur Konfiguration von Docker nginx + https-Subdomains

Heute habe ich zufällig einem Freund beim Umzug s...

So verwenden Sie Nginx als Proxy-Cache

Der Zweck der Cache-Verwendung besteht darin, den...

Beispiel und Lösung für einen SQL-Injection-Sicherheitslückenprozess

Codebeispiel: öffentliche Klasse JDBCDemo3 { öffe...

Anwendungsszenarien für React useMemo und useCallback

Inhaltsverzeichnis verwendenMemo useCallback verw...

Detaillierte Erklärung der Javascript-Grundlagen

Inhaltsverzeichnis Variable Datentypen Erweiterun...

Verwenden von Apache ab zum Durchführen von HTTP-Leistungstests

Mac wird mit Apache-Umgebung geliefert Öffnen Sie...