3.1 Flexbox
Die Erstellung von flexiblen Layouts mit Flexbox und Grid gehört zu den Schlüsseltechniken bei der Entwicklung moderner responsiver Websites. Diese Technologien ermöglichen es, die Anordnung von Elementen auf der Seite einfach zu steuern, wobei sie sich an unterschiedliche Bildschirmgrößen und Geräte anpassen.
Flexbox (Flexible Box Layout Module) ist für die eindimensionale Anordnung von Elementen gedacht (entweder in einer Zeile oder einer Spalte). Flexbox vereinfacht die Erstellung flexibler und responsiver Layouts.
Grundkonzepte von Flexbox:
- Flex-Container: ein Element, auf das die Eigenschaft
display: flexangewendet wird - Flex-Elemente: Kind-Elemente des Flex-Containers, die sich innerhalb dieses Containers befinden
Flexbox-Eigenschaften
Flex-Container:
display: flex: definiert ein Element als flex-Containerflex-direction: legt die Ausrichtungsrichtung der flex-Elemente fest (row,column,row-reverse,column-reverse)justify-content: steuert die Ausrichtung der flex-Elemente entlang der Hauptachse (flex-start,flex-end,center,space-between,space-around)align-items: steuert die Ausrichtung der flex-Elemente entlang der Querachse (stretch,flex-start,flex-end,center,baseline)
Flex-Elemente:
flex-grow: bestimmt die Fähigkeit eines Elements, zu wachsen, wenn freier Raum vorhanden istflex-shrink: bestimmt die Fähigkeit eines Elements, zu schrumpfen, wenn Raum begrenzt istflex-basis: legt die Anfangsgröße eines Elements vor der Verteilung des freien Raums festalign-self: überschreibt die inalign-itemsfestgelegte Ausrichtung des Elements entlang der Querachse
Beispiel für die Verwendung von Flexbox
Wir erstellen ein Layout mit drei Spalten, das sich an verschiedene Bildschirmgrößen anpasst:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Beispiel</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Spalte 1</div>
<div class="flex-item">Spalte 2</div>
<div class="flex-item">Spalte 3</div>
</div>
</body>
</html>
Erklärung des Codes:
-
.flex-container: definiert den Container als flex-Container, richtet die Elemente mit gleichen Abständen aus und ermöglicht, dass die Elemente in die nächste Zeile übergehen, wenn der Raum begrenzt ist -
.flex-item: flex-Elemente, die gleichen Raum einnehmen, haben eine Mindestbreite von 200px und sind gleichmäßig innerhalb des Containers verteilt
3.2 CSS Grid
CSS Grid Layout ist ein zweidimensionales Layout-System, das das Erstellen komplexer Layouts mit Zeilen und Spalten ermöglicht.
Grundkonzepte von CSS Grid:
- Grid-Container: ein Element, auf das die Eigenschaft
display: gridangewendet wird - Grid-Elemente: Kind-Elemente des grid-Containers, die sich im Grid befinden
CSS Grid-Eigenschaften
Grid-Container:
display: grid: definiert ein Element als grid-Containergrid-template-columns: legt die Anzahl und Größe der Spalten im Grid festgrid-template-rows: legt die Anzahl und Größe der Zeilen im Grid festgap: steuert die Abstände zwischen Zeilen und Spaltenjustify-items: steuert die horizontale Ausrichtung der grid-Elementealign-items: steuert die vertikale Ausrichtung der grid-Elemente
grid-column: bestimmt, wie viele Spalten ein Element einnehmen wirdgrid-row: bestimmt, wie viele Zeilen ein Element einnehmen wirdjustify-self: überschreibt die horizontale Ausrichtung des Elementsalign-self: überschreibt die vertikale Ausrichtung des Elements
Grid-Elemente:
Beispiel für die Verwendung von CSS Grid
Wir erstellen ein Layout mit drei Spalten und zwei Zeilen, das sich an verschiedene Bildschirmgrößen anpasst.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Beispiel</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
<div class="grid-item">Element 4</div>
<div class="grid-item">Element 5</div>
<div class="grid-item">Element 6</div>
</div>
</body>
</html>
Erklärung des Codes:
.grid-container: definiert den Container als grid-Container mit drei Spalten und zwei Zeilen, wobei jedes Element gleichen Raum einnimmt.grid-item: grid-Elemente mit gleichmäßigen Abständen und Hintergrund
GO TO FULL VERSION