Depot43-Unterlagen - Flex Layout

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Flex Layout</title>
	<style>
	* {
		margin:0;
	}
	.container {
		display: flex;
	}
	nav, aside {
	 	width: 15%;
		background:#ccc;
	}
	.flex-column {
		flex: 1;
	}
	</style>
</head>
<body>
	<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

Hinweis

Ein Layout, das mit CSS-Flex-Eigenschaften gebaut wird, unterscheidet sich nicht gänzlich von einem anderen Bauprinzip. Je nach Absicht, Zielsetzung und Wahl der Vorgehensweise, unterscheiden sich nur die CSS-Eigenschaften, um Elemente nebeneinander platzieren zu können. Dazu gibt es mehrere verbreitete Techniken:

Absolutes Positionieren > Ein Layout mit fixen Grössen
Float und Clear > Ein fliessendes Layout dass sich anpasst
Grid-System > Ein Responsiv-Layout (Bootstrap, Materialize, Grid960 usw.)
Flex-Layout > Ein Responsiv-Layout (Bootstrap, FlexboxGrid)