Flex - display

Ein Versuch die wichtigsten "flexbox"-Eigenschaften in Zusammengang mit Anleitung und Anregung im Editor darzustellen.

Welche Browser können FlexBox darstellen: http://caniuse.com/#feat=flexbox

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Flex - display</title>
	<style>
        #container {
		width:100%;
		height:300px;
		background:#ccc;
		border: none;
		display:flex;
	}
	div {
		background: SteelBlue;
		border: 1px solid black;
	 }
	#box1 {
		width:200px;
	}
	#box2 {
		width:200px;
	}
	#box3 {
		width:200px;
	}
	</style>
</head>
<body>
	<div id="container">
		<div id="box1">Box 1</div>
		<div id="box2">Box 2</div>
		<div id="box3">Box 3</div>
	</div>
</body>
</html>


 

            

Anregung

Wird die Breite des Browserfenster verändert, verhalten sich FlexBox-Elemente dynamisch. Sie skalieren ihre Breite "flexibel", sobald ihre Maximalbreite unterschritten wird.

Das #container-Element enthällt die Eigenschaft "display:flex;", sie ist verantwortlich dass die darin liegenden Boxen:

sich der Höhe des Containers anpassen
eine eigene Breite besitzen können
sich bei veränderter Breite des Containers, dynamisch anpassen

Entferne im Container:

display:flex;

und teste das veränderte Verhalten der Boxen, mit und ohne die "flex"-Eigenschaft.

DB-Table: flexgrundlagen