Beispiel:Flex-Layout-1.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 mit Media Queries</title>
   <style>
     html {
       padding: 1em;
     }

     body {
       display: flex;
       flex-flow: row wrap;
       gap: 1em;
       max-width: 60em;
       margin: 0 auto;
     }

     /* Mobile first: Alle Dokumentbereiche bekommen die volle Breite. */
     header,
     nav,
     article,
     section,
     aside,
     footer {
       flex: 1 1 100%;
       padding: 1em;
       border: medium solid;
       border-radius: 0 0.5em 0.5em;
     }

     header,
     footer {
       display: flex;
       flex-flow: row wrap;
       align-items: center;
       background: oklch(0.95 0.01 235);
       border-color: steelblue;
     }

     header h1 {
       flex: 1 1 0;
     }

     header nav {
       flex: 1 1 100%;
     }

     nav,
     nav ul {
       margin: 0;
       padding: 0;
     }

     nav {
       border: none;
     }

     nav ul {
       display: flex;
       flex-direction: column;
       gap: 0.3em;
     }

     nav li {
       list-style: none;
     }

     nav a {
       display: block;
       box-sizing: border-box;
       inline-size: 100%;
       padding: 1em;
       border: medium solid oklch(0.60 0.1 95);
       border-radius: 0 0.5em 0.5em;
       background: gold;
       text-align: center;
       text-decoration: none;
     }

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

     section {
       background: #f1f3f4;
       border-color: slateblue;
     }

     article {
       background: #ebf5d7;
       border-color: #8db243;
     }

     aside {
       background: #ffede0;
       border-color: #df6c20;
     }

     footer {
       justify-content: space-between;
     }

     footer p {
       text-align: right;
     }

     kbd {
       padding: 0 0.5em;
       border: thin solid #aaa;
       border-radius: 2px;
       background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee);
       box-shadow: 1px 2px 2px #ddd;
       font-family: inherit;
       font-size: 0.9em;
     }

     /* Smartphones und Tablets mit mittlerer Auflösung */
     @media (width > 30em) {
       article {
         order: 2;
       }

       #news {
         order: 3;
       }

       aside {
         flex: 1 1 auto; /* Durch auto werden die beiden asides in eine Zeile gesetzt. */
         order: 4;
       }

       footer {
         order: 5;
       }
     }

     @media (width > 35em) {
       nav ul {
         flex-direction: row;
       }

       nav li {
         flex: 1 1 0;
       }
     }

     /* Große Bildschirme */
     @media (width > 50em) {
       article {
         flex: 5 1 0;
         order: 3;
       }

       aside {
         flex: 2 1 0;
       }

       #news {
         height: min-content;
         order: 2;
         align-self: center;
       }
     }
   </style>
 </head>

 <body>
   <header>

Responsives Flexbox-Layout

     <nav>
  • <a href="#link_1.html">Startseite</a>
  • <a href="#link_2.html">Unterseite 1</a>
  • <a href="#link_3.html">Unterseite 2</a>
  • <a href="#link_4.html">Kontakt</a>
     </nav>
   </header>

   <aside id="news">

Tipp

Verändere das Browserfenster, um zu sehen, wie das Layout „umschaltet“!

   </aside>

   <article>

Ein Layout mit Flexbox

Flexbox ist eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen. Es kommt ohne feste Größenangaben aus und du kannst auf weitere CSS-Einstellungen wie position, float oder clear verzichten.

Tipp:

Mit Media Queries schaltet das Layout bei bestimmten Breakpoints vom einspaltigen Mobile first! auf ein Mehrspalten-Layout um.
Ändere die Standardschriftgröße mit Strg +.

   </article>

   <aside>

Links

  • <a href="#link_1.html">Blog</a>
  • <a href="#link_2.html">Doku</a>
  • <a href="#link_3.html">Forum</a>
   </aside>

   <footer>
     <a href="#kontakt.html">Kontakt</a>

© 2014 by SELFHTML

   </footer>
 </body>

</html>

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