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>

body { display: flex; flex-flow: row wrap; gap: 1em; } /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

header, nav, nav a, article, section, aside, footer { border-radius: 0 0.5em 0.5em; border: medium solid; padding: 1em; flex: 1 100%; }

header ,footer{ display: flex; flex-flow: row wrap; }

header * { flex: 1 1 0%; }

header img { flex: 0 0 150px; margin-right: 1em; }

header nav { flex: 1 1 100%; }

nav, nav ul, nav li { margin: 0; padding: 0; border: none; }

nav ul { display: flex; flex-direction: column; }

nav li { list-style-type: none; margin: .3em 0; flex: 1 1 100%; }

nav a { display: inline-block; width: 75%; background: gold; border: medium solid oklch(0.60 0.1 95); margin-right: 1em; text-decoration: none; text-align: center; }

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; } header, footer { background: oklch(0.95 0.01 235); border-color: steelblue; }

footer * { flex: 1 1 0%; justify-content: space-between; }

footer p { text-align: right; } /* Smart Phones und Tablets mit mittlerer Auflösung */ @media all and (width > 30em) { header img { margin-right: 50px; } 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 all and (width > 35em) { nav ul { flex-direction: row; } nav li { margin: 0; flex: 1 1 0%; } } /* Large screens */ @media all and (width > 50em) { article { order: 3; flex: 5 1 0%; } aside { flex: 2 1 0%; } #news { order: 2; align-self: center; height: min-content; } }

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

   </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 Browser­fenster, 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 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 16.06.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Flex-Layout-1.html"