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:SELFHTML-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>
			<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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_Flexbox-4.html&oldid=95595“