Heim >Web-Frontend >CSS-Tutorial >So erreichen Sie adaptive linke und rechte Seitenleisten durch CSS Flex-Layout
So erreichen Sie adaptive linke und rechte Seitenleisten durch CSS Flex-Layout
- WBOYOriginal
- 2023-09-26 10:57:021571Durchsuche
So erreichen Sie adaptive linke und rechte Seitenleisten durch das elastische CSS Flex-Layout
Einführung: Mit der kontinuierlichen Weiterentwicklung des Webdesigns ist die Umsetzung eines adaptiven Seitenlayouts zu einer wichtigen Anforderung geworden. Das CSS-Flex-Layout ist eine gute Möglichkeit, dieses Problem zu lösen. In diesem Artikel wird erläutert, wie das adaptive Layout der linken und rechten Seitenleiste mithilfe des elastischen CSS Flex-Layouts implementiert wird, und es werden detaillierte Codebeispiele aufgeführt.
1. Einführung in Flex Layout
1.1 Flexibler Container und flexible Elemente
Flex Layout implementiert das Layout, indem es die Unterelemente im Container als flexible Elemente festlegt. Das übergeordnete Element wird als Flex-Container und die untergeordneten Elemente als Flex-Elemente bezeichnet. In einem flexiblen Container können wir die Anordnung der Unterelemente und den von ihnen eingenommenen Platz steuern, indem wir einige Eigenschaften festlegen.
1.2 Eigenschaften flexibler Container
- Anzeige: Flex: Legen Sie den Container als flexiblen Container fest;
- Flex-Richtung: Legen Sie die Anordnung flexibler Elemente fest, die auf Zeile (horizontale Richtung) oder Spalte (vertikale Richtung) festgelegt werden können );
- justify-content: Legen Sie die Ausrichtung flexibler Elemente auf der Hauptachse fest, die auf Flex-Start (der Startpunkt liegt nahe links oder oben) und Flex-Ende (der Endpunkt liegt nahe rechts) eingestellt werden kann oder unten), Mitte (zentrierte Ausrichtung), Abstand zwischen (beide Enden ausrichten, der Abstand zwischen den Elementen ist gleich), Abstand um (der Abstand auf beiden Seiten des Elements ist gleich, der Abstand zwischen den Elementen beträgt die Hälfte des Originals );
- align-items: Legen Sie die Ausrichtung flexibler Elemente auf der Querachse fest. Sie können festlegen: Flex-Start (der Startpunkt liegt oben oder links), Flex-Ende (der Endpunkt liegt unten oder unten). rechts), Mitte (zentrierte Ausrichtung), Streckung (Streckung, um die gesamte Querachse auszufüllen), Grundlinie (die Grundlinie der ersten Textzeile des Elements), Ausrichtung).
1. Eigenschaften flexibler Elemente: Der Standardwert ist 0, was max-width: none; flex-shrink: 0 entspricht Der spezifische Wert kann eine Ganzzahl (z. B. 1) oder eine Dezimalzahl (z. B. 1,5) sein.
- Flex-Basis: Legen Sie die Anfangsgröße des flexiblen Elements auf der Hauptachse fest. Der Standardwert ist auto, was der Originalgröße entspricht des Artikels;
- align-self: Legt die Ausrichtung des flexiblen Artikels auf der Querachse fest.
- 2. Beispiel für ein adaptives Layout der linken und rechten Seitenleisten Lassen Sie uns anhand eines konkreten Beispiels demonstrieren, wie das adaptive Layout der linken und rechten Seitenleisten durch das elastische CSS Flex-Layout implementiert wird.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右侧边栏自适应布局示例</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
}
.sidebar {
background-color: #f1f1f1;
width: 20%;
flex-grow: 1;
}
.content {
background-color: #eee;
width: 80%;
flex-grow: 3;
}
.sidebar, .content {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h2>左侧边栏</h2>
<p>左侧边栏内容</p>
</div>
<div class="content">
<h1>主要内容区域</h1>
<p>主要内容</p>
</div>
</div>
</body>
</html>Der obige Code ist ein einfaches Beispiel für das Layout der linken und rechten Seitenleiste. Wir ordnen die untergeordneten Elemente in horizontaler Richtung an, indem wir display: flex; und flex-direction: row; des Containers festlegen.
width: 20%; der linken Seitenleiste und die width: 80%; des rechten Inhaltsbereichs steuern das Verhältnis der beiden in horizontaler Richtung, also ist, links Die Spalten nehmen 20 % der Breite ein und der Inhaltsbereich nimmt 80 % der Breite ein. display: flex; 和 flex-direction: row; 使得子元素在水平方向上排列。
左侧边栏的 width: 20%; 和右侧内容区域的 width: 80%; 控制了两者在水平方向上的占比，即左边栏占 20% 宽度，内容区域占 80% 宽度。
通过设置左侧边栏的 flex-grow: 1; 和右侧内容区域的 flex-grow: 3;Durch die Einstellung von flex-grow: 1; in der linken Seitenleiste und flex-grow: 3; im rechten Inhaltsbereich realisieren wir die automatische Anpassung der linken und Rechte Seitenleisten anpassen. Das bedeutet, dass die linke Seitenleiste 1/4 des verfügbaren Platzes und der rechte Inhaltsbereich 3/4 des verfügbaren Platzes einnimmt.
Fazit:
Es ist relativ einfach, das adaptive Layout der linken und rechten Seitenleiste über das elastische CSS-Flex-Layout zu implementieren. Wir müssen lediglich den übergeordneten Container auf einen Flex-Container festlegen und die relevanten Eigenschaften von Flex verwenden, um die Sortierung zu steuern. Ausrichtung und Raumbelegung der untergeordneten Elemente. Dieser Artikel enthält ein spezifisches Codebeispiel, auf das sich die Leser beziehen und daraus lernen können. Ich hoffe, dieser Artikel hilft Ihnen!
Das obige ist der detaillierte Inhalt vonSo erreichen Sie adaptive linke und rechte Seitenleisten durch CSS Flex-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!