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