Heim > Artikel > Web-Frontend > So erreichen Sie adaptive linke und rechte Seitenleisten durch CSS Flex-Layout
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
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.
<!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!