Depot43-Unterlagen - Layout

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Layout - Responsiv</title>
	<style>
	* {
		margin:0;
	}
	.container {
		display: flex;
		flex-flow: row wrap;
	}
	nav, aside {
	 	flex:1 ;
		background:#ccc;
		padding: 10px;
	}
	.flex-column {
		flex: 4;
		padding:10px;
	}
	@media only screen and (max-width: 768px) {
		body {
			background-color: lightblue;
		}
		.flex-column {
			flex: 0 100%;
			order: 1;
		}
		nav {
			flex-grow: 1;
			order: 2;
		}
		aside {
			flex-grow: 2;
			order: 3;
			background:#efefef;
		}
	}
	</style>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<div class="container"> 
		<nav> 
			<ul> 
				<li><a href="">Seite 1</a></li>
				<li><a href="">Seite 2</a></li>
				<li><a href="">Seite 3</a></li>
			</ul> 
		</nav> 
		<div class="flex-column"> 
			<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet nam rem laudantium, id ullam voluptatem sequi repudiandae. </section> 
			<article> 
				<h1>Haupttitel</h1>  
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia cupiditate, dignissimos aut natus consequuntur porro eaque placeat saepe quasi accusamus, facilis modi non dolorum fuga corporis temporibus sint. Itaque, exercitationem.</p>  
			</article> 
		</div> 
		<aside> 
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, corporis.</p> 
		</aside> 
	</div>
</body>
</html>


 

            

Aufbau des Layouts

Responsiv Design

Wird der "Viewport" mit einer "media-Query"-Abfrage zusätzlich formatiert, müssen die Flex-Elemente sich anders umbrechen. In diesem Falle ist es notwendig, die Standard-Einstellung für einen Umbruch zu überschreiben mit: "flex-flow: row wrap;".

Die Breite des Browserfenster wird mit einer Media-Query abgefragt: "@media only screen and (max-width: 768px) { }", unter 768 Pixel Fensterbreite gelten diese CSS-Regeln.

Das gewünschte Verhältnis der Breite kann jetzt verändert werden. Bsp: "flex: 0 100%;" entfernt die flex-Eigenschaft und setzt das Element auf die ganze Breite.

Die Anordnung der Elemente kann verändert werden, mit "order: 1;", "order: 2;", "order: 3;" wird die im HTML geschriebene Reihenfolge verändert.