Beispiel:CSS3 Flexbox-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>Flexbox-1</title>
  <style>
			body {
				display:-webkit-flex;
				display: flex;
				-webkit-flex-flow: row wrap;
				flex-flow: row wrap;
			}
			header, nav, article, section, aside, footer {
				border-radius: 0px 0.5em 0.5em;
				border: 1px solid;
				padding: 10px;
				margin: 10px;
				-webkit-flex: 1 100%;
				flex: 1 100%;
			}
			header {
				background: #F1F3F4;
				border-color: #d5d5d5;
			}
			nav {
				background: #fffbf0;
				border-color: #e7c157;
			}
			section {
				background: #F1F3F4;
				border-color: slateblue;
			}
			article {
				background: #ffede0;
				border-color: #df6c20;
				-webkit-flex: 3 1 0%;
				flex: 3 1 0%;
			}
			aside {
				background: #ebf5d7;
				border-color: #8db243;
				-webkit-flex: 1 1 0%;
				flex: 1 1 0%;
			}
			footer {
				background: #e4ebf2;
				border-color: #8a9da8;
			}
		</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>
			<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>
		</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>