Beispiel:Flexbox-6.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 6 - align-items </title> <style>
.menu {
display: flex; gap: 1em; align-items: center; height: 6rem; justify-content: flex-start;
}
.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-items: center;
}
body:has(input[value="stretch"]:checked) .menu {
align-items: stretch;
}
body:has(input[value="flex-start"]:checked) .menu {
align-items: flex-start;
}
body:has(input[value="flex-end"]:checked) .menu {
align-items: flex-end;
}
@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 6 - Ausrichtung mit align-items
<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="jc" value="flex-start"> flex-start</label> <label><input type="radio" name="jc" value="center" checked> center</label> <label><input type="radio" name="jc" value="stretch"> stretch (Standardwert)</label> <label><input type="radio" name="jc" value="flex-end"> flex-end</label>
</body> </html>
