Flex "Child"

Flex regelt die Eltern-Kind-Beziehung ineninander verschachtelter HTML-Elemente. Ein Container-Element mit "display:flex;" zur "Flex-Box". Das wirkt auf die darin liegenden Elemente, die "Flex-Items". In der vertikalen erben die gleiche Höhe des Eltern-Elements. Zusätzlich kann den Breite der Kind-Elementen ein "Flex-Box"-Verhalten zugeteit werden. Mit "flex:1;" verteilen sich diese auf die gesamte mögliche Breite.

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 "Child"</title>
	<style>
	#container {
		width:100%;
		height:300px;
		display:flex;
	}
	div {
		background: SteelBlue;
		border: 1px solid black;
		flex:1;
	}
	</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 den Wert der Eigenschaft "flex:1;", der den Boxen zugewiesen wurde:

flex:0;

Mit 0 oder 1 kannst du das Flex-Verhalten der Boxen ein- oder ausschalten.

Mit "flex:1;" werden alle Elemente auf die gleiche Breite gesetzt.

    #box1 {
        flex:1;
    }
    #box2 {
        flex:2;
    }
    #box3 {
        flex:3;
    }

Mit den flex-Angaben kann ein Verhältniss angegeben werden um die Boxen horizontal zu verteilen.

DB-Table: flex-child