Beispiel:Flex-Layout-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!doctype html> <html lang="de"> <head> 

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Flexbox-Layout - 2</title>

 <style>
   * { box-sizing: border-box; }

   body {
     /* Grundlayout: Kopf, Inhalt und Fuß untereinander. */
     display: flex;
     flex-direction: column;
     gap: 1rem;
     min-height: 90dvh;
     max-width: 80em;
     margin: 0 auto;
     font-family: sans-serif;
   }
   
   header, nav, nav li, article, aside, footer {
     /* allgemeine Gestaltungsdetails */
     border-radius: 0 .5rem .5rem;
     border: thin solid;
   }

   header {
     /* Header: Logo bleibt fest, der Slogan darf umbrechen. */
     display: flex;
     flex-wrap: wrap;
     gap: .7rem;
     align-items: center;
     font-size: 1.5em;
     padding: .7rem;
   }

   .logo {
     /* horizontal zentriert, wenn in eigener Zeile */
     margin: auto;
     --logo-size: 3rem;
     height: var(--logo-size);
   }
   
   .logo img {
     height: var(--logo-size);
     aspect-ratio: 1;
   }

   .slogan {
     /* Der Slogan bricht um. */
     flex: 1 1 22em;
     font-size: 2rem;
   }

   nav { 
     background-color: #fffbf0;
     border-color: #e7c157;
     padding: 0;
   }

   nav ul {
     --nav-gap: .7rem;
     /* Grenze für 4 Elemente in einer Zeile. */
     --nav-four-cols: calc(12em * 4 + var(--nav-gap) * 3);
     display: flex;
     flex-wrap: wrap;
     gap: var(--nav-gap);
     margin: 0;
     padding: .7rem;
   }

   nav li {
     /* 4 nebeneinander, dann 2 x 2, dann einspaltig. */
     flex: 1 1 clamp(12em, calc((var(--nav-four-cols) - 100%) * 999), calc((100% - var(--nav-gap)) / 2));
     min-inline-size: min(100%, 12em);
     list-style-type: none;
     background-color: gold;
     border: thin solid solid oklch(0.60 0.1 95);
   }

   nav li:hover,
   nav li:focus-within { background-color: oklch(0.96 0.06 95); }

   nav a {
     display: block;
     padding: 1rem;
     font-weight: bold;
   }

header, footer { 

   background-color: oklch(0.95 0.01 235);
   border-color: steelblue;

}


body{ container-type: inline-size; resize: horizontal; overflow: auto; border: thin dotted; padding: 1rem; }

html {padding: 1em;} </style>

</head>

<body>

<header>

Flexbox-Layout ohne Media-Queries

</header>

<nav>

  • <a href="#">nav ul li: Eins</a>
  • <a href="#">Zwei</a>
  • <a href="#">Drei</a>
  • <a href="#">Vier</a>

</nav>

<main>

Hier kommt noch was!

</main>

</body> </html>

Abgerufen am 15.06.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Flex-Layout-2.html"