So implementieren Sie ein zweispaltiges Layout über das CSS Flex-Layout
So implementieren Sie ein zweispaltiges Layout mit CSS Flex Flexible Layout
CSS Flex Flexible Layout ist eine moderne Layouttechnologie, die den Prozess des Webseitenlayouts vereinfachen kann und es Designern und Entwicklern ermöglicht, auf einfache Weise flexible und an verschiedene Layouts anpassbare Designs zu erstellen für jede Bildschirmgröße. Unter anderem ist die Implementierung eines zweispaltigen Layouts eine der häufigsten Anforderungen im Flex-Layout. In diesem Artikel stellen wir vor, wie Sie mit dem elastischen CSS Flex-Layout ein einfaches zweispaltiges Layout implementieren und stellen spezifische Codebeispiele bereit.
Verwenden von Flex-Containern und -Elementen
Bei der Verwendung von Flex-Layout benötigen wir einen übergeordneten Container, um unseren Layout-Inhalt zu umschließen. Dieser Container wird als Flex-Container bezeichnet. Flex-Container können erstellt werden, indem die Anzeigeeigenschaft auf „flex“ oder „inline-flex“ gesetzt wird. Konkret können wir einen Flex-Container mit dem folgenden Code erstellen:
<div class="container"> <!-- 布局的内容 --> </div>
Als nächstes müssen wir zwei untergeordnete Elemente im Flex-Container erstellen, der unser zweispaltiges Layout darstellt. Diese Teilprojekte werden Flex-Projekte genannt. Im Flex-Container können wir die Größe und Elastizität jedes Elements steuern, indem wir die Flex-Eigenschaft auf „1“ oder andere Werte setzen. Konkret können wir zwei Flex-Projekte mit dem folgenden Code erstellen:
<div class="container">
<div class="item">
<!-- 左栏内容 -->
</div>
<div class="item">
<!-- 右栏内容 -->
</div>
</div>Flex-Layout festlegen
Um ein zweispaltiges Layout zu erreichen, müssen wir die relevanten Eigenschaften des Flex-Containers und des Projekts festlegen. Zuerst müssen wir die untergeordneten Elemente im Flex-Container horizontal anordnen. Dies kann erreicht werden, indem die Flex-Direction-Eigenschaft des Containers auf „row“ gesetzt wird. Konkret können wir die Eigenschaften des Flex-Containers über den folgenden Code festlegen:
.container {
display: flex;
flex-direction: row;
}Als nächstes können wir den von jedem Element belegten Platz steuern, indem wir die Flex-Eigenschaft des Elements festlegen. Hier können wir relative Einheiten wie „fr“ (kurz für „Fractional Flex-Grow Property“) verwenden, um den von den Kindern belegten Anteil zu bestimmen. Konkret können wir die Eigenschaften von Flex-Elementen über den folgenden Code festlegen:
.item {
flex: 1;
}Hier verwenden wir flex: 1, um den von jedem Element eingenommenen Platz auf ein gleiches Verhältnis festzulegen. Wenn wir möchten, dass die linke Spalte mehr Platz einnimmt, können wir den Flex-Wert des entsprechenden Elements anpassen. Beispielsweise können wir für die linke Spalte die Flex-Eigenschaft auf „2“ und für die rechte Spalte die Flex-Eigenschaft auf „1“ festlegen.
Vollständiges Codebeispiel
Hier ist ein vollständiges Codebeispiel, das zeigt, wie man ein einfaches zweispaltiges Layout mit CSS Flex implementiert:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
}
.item {
flex: 1;
padding: 20px;
}
.left {
background-color: #f1f1f1;
}
.right {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class="container">
<div class="item left">
<!-- 左栏内容 -->
</div>
<div class="item right">
<!-- 右栏内容 -->
</div>
</div>
</body>
</html>In diesem Beispiel haben wir einfache CSS-Stile verwendet, um die Hintergrundfarbe der einzelnen Elemente festzulegen Unterscheiden Sie zwischen der linken und rechten Spalte. Sie können zusätzliche Stile hinzufügen, um Ihr Layout entsprechend Ihren Anforderungen zu verschönern.
Zusammenfassung
Durch die Verwendung des CSS Flex-Layouts können wir problemlos ein zweispaltiges Layout implementieren. Setzen Sie einfach die Anzeigeeigenschaft des Flex-Containers auf „flex“, dann die Flex-Direction-Eigenschaft auf „row“ und dann die Flex-Eigenschaft des Flex-Elements auf den entsprechenden Wert, um ein flexibles und anpassungsfähiges Layout zu erreichen. Das Obige ist ein einfaches Beispiel. Sie können den Code an Ihre Bedürfnisse und Ihr Design anpassen. Ich hoffe, dass dieser Artikel Ihnen hilft, das CSS Flex-Layout zu verstehen und zu verwenden!
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein zweispaltiges Layout über das CSS Flex-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Wöchentliche Plattformnachrichten: Web -Apps im Galaxy Store, Tappable Stories, CSS SubgridApr 14, 2025 am 11:20 AMIn der Roundup:#039; Firefox-Gewinne locker-ähnliche Kräfte, Samsungs Galaxy Store beginnt mit der Unterstützung von progressiven Web-Apps, CSS Subgrid ist in Firefox versandt
Wöchentliche Plattform News: Internet Explorer -Modus, Geschwindigkeitsbericht in der Suchkonsole, Einschränkungen der BenachrichtigungsaufforderungenApr 14, 2025 am 11:15 AMIn der Roundup: Internet Explorer in dieser Woche findet der Weg in Edge, Google Search Console einen neuen Geschwindigkeitsbericht, und Firefox gibt die Benachrichtigung von Facebook an
Die Kraft (und Spaß) des Umfangs mit CSS -benutzerdefinierten EigenschaftenApr 14, 2025 am 11:11 AMSie sind wahrscheinlich schon zumindest ein wenig mit CSS -Variablen vertraut. Wenn nicht, finden Sie hier einen Überblick über zwei Sekunden: Sie werden wirklich benutzerdefinierte Eigenschaften genannt, Sie haben festgelegt
Wir sind ProgrammiererApr 14, 2025 am 11:04 AMDas Erstellen von Websites ist das Programmieren. Das Schreiben von HTML und CSS ist das Programmieren. Ich bin Programmierer, und wenn Sie hier CSS-Tricks lesen, sind Sie wahrscheinlich
Wie entfernen Sie ungenutzte CSS von einer Website?Apr 14, 2025 am 10:59 AMHier ist das, was ich im Voraus wissen kann: Dies ist ein schwieriges Problem. Wenn Sie hier gelandet sind
Eine Einführung in die Bild-in-Bild-Web-APIApr 14, 2025 am 10:57 AMDas Bild-in-Bild trat mit der Veröffentlichung von MacOS Sierra im Jahr 2016 im Web im Websser auf. Es ermöglichte es einem Benutzer, ein Pop zu haben.
Möglichkeiten zur Organisation und Vorbereitung von Bildern für einen Unschärfeneffekt mit GatsbyApr 14, 2025 am 10:56 AMGatsby macht großartige Arbeitsplätze, die Bilder verarbeiten und mit Bildern behandeln. Zum Beispiel hilft es Ihnen, Zeit mit Bildoptimierung zu sparen, da Sie nicht manuell manuell müssen
Oh hey, der Padding -Prozentsatz basiert auf der Breite des übergeordneten ElementsApr 14, 2025 am 10:55 AMIch habe heute etwas über prozentuale (%) Polsterung gelernt, das ich in meinem Kopf völlig falsch hatte! Ich dachte immer, dass die prozentuale Polsterung auf dem basiert
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion
VSCode Windows 64-Bit-Download
Ein kostenloser und leistungsstarker IDE-Editor von Microsoft
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software
