Beispiel:CSS-Flexbox-3.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>Flexbox 3 - flex-direction</title> <style>
.flex-container {
display: flex; flex-direction: row; gap: 1em;
}
.flex-item {
border: thin solid; padding: .5em; background: #ffebe6; flex: 1 1 auto;
} @container (max-width: 30em) {
.flex-container {
flex-direction: column;
}
}
body {
container-type: inline-size; width: 60em; animation: widen 6s infinite alternate ease-in-out; border: thin dotted steelblue; padding: 1em;
}
@keyframes widen {
0% { width: 20em; }
100% { width: 60em; }
}
p.flex-item {
font-weight: bold; text-align: center;
}
.flex-item:nth-of-type(2) { background: #fdfcf3; }
.flex-item:nth-of-type(3) { background: #ebf5d7; }
.flex-item:nth-of-type(4) { background: #e6f2f7; }
.flex-item:nth-of-type(5) { background: hsl(277 53% 73% /0.3); } </style> </head> <body>
Inhaltsverzeichnis
Flexbox 3
1
2
3
4
5
<main class="flex-container">
<section class="flex-item">
Flexbox
Flexbox ist eine moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen.
</section> <section class="flex-item">
Was kann Flexbox?
Flexbox verzichtet auf feste Breiten, wobei sich das flexible Element an den tatsächlich verfügbaren Platz anpasst, indem es die Leerräume zwischen den Elementen gleichmäßig verteilt.
</section> <section class="flex-item">
RWD
Wenn die Breite des Viewports für ein horizontales Mehrspaltenlayout nicht mehr ausreicht, kann die Richtung der Anordnung per media queries auf eine vertikale Anordnung umgestellt werden.
</section>
</main> </body> </html>
