Beispiel:CSS3 Flexbox-4.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"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>Flexbox-4</title> <style> body { display: flex; flex-flow: row wrap; } /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */ body { max-width: 30em; } 

			header, nav, nav a, article, section, aside, footer {

border-radius: 0px 0.5em 0.5em; border: thin solid; padding: 10px; margin: 10px; flex: 1 100%; } header { background: #F1F3F4; border-color: #d5d5d5; display: flex; flex-flow: row wrap; } header * { flex: 1 1 0%; } header img { flex: 0 0 150px; margin-right: 20px; } 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: 95%; background: #fffbf0; border: thin solid #dfac20; margin: 0; text-decoration: none; text-align: center; } nav a:hover, nav a:focus { background-color: #dfac20; } section { background: #F1F3F4; border-color: slateblue; } article { background: #ffede0; border-color: #df6c20; } aside { background: #ebf5d7; border-color: #8db243; } footer { background: #e4ebf2; border-color: #8a9da8; display: flex; flex-flow: row wrap; } footer * { flex: 1 1 0%; justify-content: space-between; } footer p { text-align:right; } </style> </head> <body> <header>

Seitentitel

<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">

Top-News

Gestern gab's Freibier!

</aside> <article>

Ein Layout mit Flexbox

Flexbox ist eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen. Dabei kommen Sie ohne feste Größenangaben aus und können auf weitere CSS-Einstellungen wie position, float oder clear verzichten.

Weiterhin kann nicht nur die Größendarstellung, sondern auch die Reihenfolge der Elemente unabhängig vom HTML-Code durch CSS festgelegt werden.

eine Bitte:

Wenn Sie mit uns zufrieden sind, sagen Sie's weiter!
Wenn nicht, sagen Sie's <a href="mailto:projekt@selfhtml.org ">uns</a>!

</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 29.09.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS3_Flexbox-4.html"