Beispiel:Flexbox-4.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 4 - flex-grow </title> <style>
nav ul, .flex-container {
display: flex; gap: 1em;
}
nav li, .flex-item {
flex: auto;
}
nav li:nth-of-type(2) { flex-grow: 2; background: lightyellow; }
@container (width < 30rem) {
ul, .flex-container {
flex-direction: column;
}
}
.wrapper {
container-type: inline-size; resize: horizontal; overflow: auto; max-width: 55rem; border: thin dotted; padding: 1rem;
}
nav li {
background: gold; border: thin solid; border-radius: 0 0.5em 0.5em; list-style-type: none; padding: 0.5em 1em;
}
.flex-item {
border: medium solid steelblue; padding: 0.5em;
}
</style>
</head> <body>
Inhaltsverzeichnis
Flexbox 4 - flex-grow
<nav>
</nav>
<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>
</body> </html>
