Beispiel:Flexbox-7.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 7 - Mehrzeilige Flexboxen </title> <style>
.menu { display: flex; flex-wrap: wrap; gap: 1em; height: 15em; width: 25em; }
.flex-container {
display: flex; gap: 1em; align-items: flex-start; /* or stretch */
}
nav li, .flex-item { flex: 0 1 auto; }
/* interactive control via :has() */ body:has(input[value="center"]:checked) .menu {
align-content: center;
}
body:has(input[value="space-between"]:checked) .menu {
align-content: space-between;
}
body:has(input[value="space-around"]:checked) .menu {
align-content: space-around;
}
body:has(input[value="space-evenly"]:checked) .menu {
align-content: space-evenly;
}
@container (width < 20rem) {
ul, .flex-container {
flex-direction: column;
}
}
.wrapper {
container-type: inline-size; resize: horizontal; overflow: auto; max-width: 55rem; border: thin dotted; padding: 1rem;
}
nav ul {width: 29em;} 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;
}
.controls label {
display:block;
}
</style>
</head> <body>
Inhaltsverzeichnis
Flexbox 7 - Mehrzeilige Flexboxen
<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">
Vertikale Ausrichtung ändern
<label>
<input type="radio" name="ac" value="flex-start" checked> flex-start
</label>
<label>
<input type="radio" name="ac" value="center"> center
</label>
<label>
<input type="radio" name="ac" value="space-between"> space-between
</label>
<label>
<input type="radio" name="ac" value="space-around"> space-around
</label>
<label>
<input type="radio" name="ac" value="stretch"> stretch
</label>
</body> </html>
