10.1 Responsive Spalten
Flexbox ist für ein-dimensionale Kompositionen gedacht, was bedeutet, dass es sich perfekt eignet, um Elemente in einer Reihe oder Spalte anzuordnen. Lass uns die Grundlagen von Flexbox betrachten, sowie Techniken, um komplexe und responsive Layouts zu erstellen.
Flex-Container und Flex-Elemente
-
Flex-Container: ein Element, auf das die Eigenschaft
display: flexangewendet wird. Dieser Container verwaltet die Anordnung aller Kind-Elemente (Flex-Elemente) - Flex-Elemente: Kind-Elemente des Flex-Containers
1. Erstellung responsiver Spalten
Beispiel zur Erstellung responsiver Spalten unter Verwendung von flex-wrap, flex-grow,
flex-shrink und flex-basis:
CSS
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
flex: 1 1 200px;
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Spalten mit Flexbox</title>
<link rel="stylesheet" href="styles.css">
</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>
Code-Erklärung:
-
.flex-container: definiert den Container als Flex-Container mit Elementen, die in die nächste Zeile umbrochen werden können, wenn nicht genug Platz vorhanden ist (flex-wrap: wrap) -
.flex-item: Elemente haben die gleiche Größe und können sich an den verfügbaren Platz anpassen (flex: 1 1 200px)
10.2 Responsive Bildergalerie
Erstellen wir eine responsive Bildergalerie, die die Anzahl der Spalten in Abhängigkeit von der Bildschirmgröße ändert:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img data-max-width="256" data-id="ebb06cf3-0e04-45bd-a33e-31fe096fd323" src="https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg" alt="image 1">
<img data-max-width="256" data-id="ddbb4085-7a58-44e0-88fe-a2368b777222" src="https://cdn.javarush.com/images/article/ddbb4085-7a58-44e0-88fe-a2368b777222/256.jpeg" alt="image 2">
<img data-max-width="256" data-id="71be962a-10e9-4351-8c27-8846c6ad2e00" src="https://cdn.javarush.com/images/article/71be962a-10e9-4351-8c27-8846c6ad2e00/256.jpeg" alt="image 3">
<img data-max-width="256" data-id="8afd6be8-0f8e-42e9-a64b-8549f12862f7" src="https://cdn.javarush.com/images/article/8afd6be8-0f8e-42e9-a64b-8549f12862f7/256.jpeg" alt="image 4">
<img data-max-width="256" data-id="77241dcb-9b7f-471e-934e-9f7f2a42d369" src="https://cdn.javarush.com/images/article/77241dcb-9b7f-471e-934e-9f7f2a42d369/256.jpeg" alt="image 5">
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Bild 1">
<img src="image2.jpg" alt="Bild 2">
<img src="image3.jpg" alt="Bild 3">
<img src="image4.jpg" alt="Bild 4">
<img src="image5.jpg" alt="Bild 5">
</div>
</body>
</html>
Erklärung:
- Auf großen Bildschirmen nehmen die Bilder ein Drittel der Containerbreite ein
- Auf Bildschirmen mit bis zu 768 Pixeln Breite nehmen die Bilder die Hälfte der Containerbreite ein
- Auf Bildschirmen mit bis zu 480 Pixeln Breite nehmen die Bilder die volle Breite des Containers ein
10.3 Komplexes responsives Layout mit Flexbox
Lassen uns ein komplexes Layout mit Flexbox erstellen, das einen Header, Sidebar, Hauptinhalt und Footer umfasst, der sich an verschiedene Bildschirmgrößen anpasst:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Komplexes Flexbox-Layout</title>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
aside {
background-color: #ccc;
padding: 20px;
}
@media (min-width: 768px) {
main {
flex-direction: row;
}
.content {
flex: 3;
}
aside {
flex: 1;
}
}
</style>
</head>
<body>
<header>Header</header>
<main>
<aside>Sidebar</aside>
<div class="content">Hauptinhalt</div>
</main>
<footer>Footer</footer>
</body>
</html>
Erklärung:
- Auf kleinen Bildschirmen besteht das Layout aus Header, Hauptinhalt, Sidebar und Footer, die vertikal angeordnet sind
- Auf Bildschirmen mit einer Breite von 768 Pixeln und mehr werden Hauptinhalt und Sidebar horizontal angeordnet
GO TO FULL VERSION