Beispiel:Flexbox-2.html
Aus SELFHTML-Wiki
<!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 - 2</title> <style>
nav {
display: flex;
}
ul {
display: flex; gap: 1em; /* flex-wrap: wrap; */ margin-inline-start: auto;
}
@container (width < 30rem) {
ul {
flex-direction: column;
}
}
.wrapper {
container-type: inline-size; resize: horizontal; overflow: auto; max-width: 40rem; 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;
}
</style> </head> <body>
Flexbox 2 - Responsives Umschalten
<nav>
Logo
</nav>
Ziehe den wrapper kleiner und größer und beobachte, was passiert.
Entferne die Auskommentierung (/* … */) von flex-wrap: wrap;.
</body>
</html>
