Beispiel:Flexbox-5.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 5 - justify-content </title> <style>
.menu, .flex-container {
display: flex; gap: 1em; justify-content: flex-start;
}
nav li, .flex-item {
flex: 0 1 auto;
}
/* interactive control via :has() */ body:has(input[value="center"]:checked) .menu {
justify-content: center;
}
body:has(input[value="space-between"]:checked) .menu {
justify-content: space-between;
}
body:has(input[value="space-around"]:checked) .menu {
justify-content: space-around;
}
body:has(input[value="space-evenly"]:checked) .menu {
justify-content: space-evenly;
}
@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;
}
.controls label {
display:block;
}
</style>
</head> <body>
Inhaltsverzeichnis
Flexbox 5 - Ausrichtung mit justify-content
<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">
Ausrichtung ändern
<label><input type="radio" name="jc" value="flex-start" checked> start</label> <label><input type="radio" name="jc" value="center"> center</label> <label><input type="radio" name="jc" value="space-between"> space-between</label> <label><input type="radio" name="jc" value="space-around"> space-around</label> <label><input type="radio" name="jc" value="space-evenly"> space-evenly</label>
</body> </html>
