Dynamische Breite

Allein die CSS-Eigenschaft "display:flex;" verändert das Verhalten aller im Container verschachtelten HTML-Elemente.

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



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

Verändere die Breiten der Boxen:

width:299px;

Untersuche das dynamische Verhalten der Boxen im Browser.

Box 2 kann eine andere Höhe besitzen:

height:200px;

Die Boxen ohne Höhenangabe sind gleich hoch wie der Container. Box 2 besitzt eine eigene Höhe, verhällt sich aber in seiner Breite unverändert.

Werden Innen- oder Aussenabstände (margin, padding) übergeben, werden diese nicht kumuliert, wie im Standardverhalten des Browsers. Ergänze die CSS-Eigenschaften für Box 2:

margin:20px;
padding:20px;

Box 2 zeigt alle zusätzlichen Grössenangaben und Abstände, verhällt sich aber immer noch als "FlexBox"-Element.

DB-Table: dynamische-breite