10.1 Einfaches Raster
Flexbox ermöglicht es, flexible und anpassbare Layouts zu erstellen. Jetzt schauen wir uns einige Beispiele an, wie man Flexbox zur Erstellung verschiedener Layouts verwenden kann, einschließlich eines einfachen Rasters, der Zentrierung von Elementen, der Erstellung von Navigationsmenüs und Produktkarten.
Erstellung eines einfachen Rasters mit Flexbox. Dieses Beispiel zeigt, wie man leicht gleichmäßig verteilte Elemente in einem Container erstellen kann.
Verwendungsbeispiel:
.flex-container {
display: flex;
flex-wrap: wrap; /* Ermöglicht den Elementen, in eine neue Zeile zu wechseln */
background-color: lightgrey;
padding: 10px;
}
.flex-item {
background-color: deepskyblue;
margin: 10px;
padding: 20px;
color: white;
font-size: 20px;
flex: 1 1 calc(33.333% - 40px); /* Flexible Platzverteilung */
box-sizing: border-box;
}
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
flex-basis: calc(33.333% - 40px): legt die ursprüngliche Größe des Elements fest, bevor irgendeine Streckung oder Stauchung angewendet wird. In diesem Fall nimmt das Element 33,333% der Breite des Containers minus 40 Pixel ein. calc() ermöglicht es, Berechnungen direkt in CSS auszuführen.
10.2 Zentrierung von Elementen
Zentrierung von Elementen auf horizontaler und vertikaler Ebene in einem Container mit Flexbox.
Verwendungsbeispiel:
.flex-container {
display: flex;
justify-content: center; /* Horizontale Zentrierung */
align-items: center; /* Vertikale Zentrierung */
height: 100vh; /* Höhe des Containers auf voller Bildschirmhöhe */
background-color: lightgrey;
}
.flex-item {
background-color: deepskyblue;
padding: 20px;
color: white;
font-size: 20px;
}
<div class="flex-container">
<div class="flex-item">Zentriertes Element</div>
</div>
10.3 Navigationsmenü
Erstellung eines horizontalen Navigationsmenüs mit Flexbox.
Verwendungsbeispiel:
.nav-container {
display: flex;
justify-content: space-around; /* Elemente mit gleichem Abstand verteilen */
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
text-decoration: none;
padding: 10px 20px;
}
.nav-item:hover {
background-color: #575757;
}
<div class="nav-container">
<a href="#" class="nav-item">Startseite</a>
<a href="#" class="nav-item">Über</a>
<a href="#" class="nav-item">Dienstleistungen</a>
<a href="#" class="nav-item">Kontakt</a>
</div>
10.4 Produktkarten
Erstellung eines Layouts für Produktkarten mit Flexbox.
Verwendungsbeispiel:
.product-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.product-item {
flex: 1 1 calc(33.333% - 40px);
border: 1px solid #ccc;
padding: 20px;
background-color: #fff;
text-align: center;
}
.product-item img {
max-width: 100%;
height: auto;
}
.product-title {
font-size: 1.2em;
margin: 10px 0;
}
.product-price {
font-size: 1.5em;
color: #e74c3c;
}
<div class="product-list">
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Produktbild">
<h3 class="product-title">Produkt 1</h3>
<p class="product-price">$99.99</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Produktbild">
<h3 class="product-title">Produkt 2</h3>
<p class="product-price">$79.99</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Produktbild">
<h3 class="product-title">Produkt 3</h3>
<p class="product-price">$89.99</p>
</div>
</div>
Code-Erklärung:
.product-list: Flex-Container mit Unterstützung für Zeilenumbruch und Abständen zwischen den Produktkarten.product-item: Flex-Elemente (Produktkarten) mit fester Breite, die sich automatisch an die Größe des Containers anpassen
GO TO FULL VERSION