Beispiel:CSS3 Flexbox-5.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:SELFHTML-Beispiel-Grundlayout.css" />
    <title>Flexbox-5</title>
    <style>
      body {
        display: flex;
        flex-flow: row wrap;
      }

      /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
      header, nav, nav a, article, section, aside, footer {
        border-radius: 0px 0.5em 0.5em;
        border: 1px 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: 1.3em 0;
        flex: 1 1 100%;
      }
      nav a {
        display: inline-block;
        width: 95%;
        background: #fffbf0;
        border: 1px 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;
      }
      /* Smart Phones und Tablets mit mittlerer Auflösung */
      @media all and (min-width: 35em) {
      header img {
        margin-right: 50px;
      }
      nav ul {
        flex-direction: row;
      }
      nav li {
        margin: 0 10px;
        flex: 1 1 0%;
      }
      article {
        order: 2;
      }
      #news {
        order: 3;
      }
      aside {
      /* durch auto werden die beiden asides in eine Zeile gesetzt */
        flex: 1 1 auto;
        order: 4;
      }
      footer {
        order: 5;
      }
      }

     /* Large screens */
     @media all and (min-width: 50em) {
     article {
        /* Der Article wird 2.5x so breit wie die beiden asides! */
        order: 3;
        flex: 5 1 0%;
      }
      aside {
        flex: 2 1 0%;
      }
      #news {
        order: 2;
        align-self: center;
        height: 120px;
      }
      }
    </style>
</head>
<body>
		<header>
			<h1>Seitentitel</h1>
			<nav>
				<ul>
					<li><a href="#link_1.html">Startseite</a></li>
					<li><a href="#link_2.html">Unterseite 1</a></li>
					<li><a href="#link_3.html">Unterseite 2</a></li>
					<li><a href="#link_4.html">Kontakt</a></li>
				</ul>
			</nav>
		</header>
		<aside id="news">
			<h2>Top-News</h2>
			<p>Gestern gab's Freibier!</p>
		</aside>
		<article>
			<h2>Ein Layout mit Flexbox</h2>
			<p>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.
			</p>
			<p>
				Weiterhin kann nicht nur die Größendarstellung,
				sondern auch die Reihenfolge der Elemente unabhängig
				vom HTML-Code durch CSS festgelegt werden.
			</p>
			<h3>eine Bitte:</h3>
			<p>Wenn Sie mit uns zufrieden sind, sagen Sie's weiter!
				<br>
				Wenn nicht, sagen Sie's
				<a href="mailto:projekt@selfhtml.org ">uns</a>!
			</p>
		</article>
		<aside>
			<h2>Links</h2>
			<ul>
				<li><a href="#link_1.html">Blog</a></li>
				<li><a href="#link_2.html">Doku</a></li>
				<li><a href="#link_3.html">Forum</a></li>
			</ul>
		</aside>
		<footer>
			<a href="#kontakt.html">Kontakt</a>
			<p>© 2014 by SELFHTML</p>
		</footer>
	</body>
</html>