Flex Grow

Mit "display:flex;" und "flex-wrap: wrap;" kann ein Responsiv-Layout erstellt werden, ohne dass ein Breakpoint mit Media-Query angewendet wird. Dies, durch das Verhältnis von Minimalbreite "min-width: 400px;" und Basis-Wert für die drei Boxen "flex-basis: 33.3333%;" . Der in dieser Weise festgelegte Umbruchwert, macht die Flex-Elemente reaktionsfähig. Damit sie sich auch nach dem Umbruch ihrem Container anpassen, müssen sie wachsen "flex-grow: 1;".

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 Grow</title>
	<style>
	* {margin:0;}
	#container {
		display: flex;
		flex-wrap: wrap;
		padding:0;
	}
	div {
		background: SteelBlue;
		border: 1px solid black;
		box-sizing: border-box;
		padding: 1em;
		min-width: 400px;
		flex-basis: 33.333%;
		flex-grow: 1;
	}
	</style>
</head>
<body>
	<div id="container">
		<div id="box1">
			<h3>Box 1</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore commodi, recusandae enim dolor placeat ad ipsam eveniet et qui magnam mollitia sit facere consequatur, sed fuga sunt harum neque atque.</p>
		</div>
		<div id="box2">
			<h3>Box 2</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ex facilis obcaecati hic! Tenetur sit omnis illo, corporis, voluptate, sapiente error adipisci itaque quaerat nemo sequi deleniti vero tempore assumenda!</p>
		</div>
		<div id="box3">
			<h3>Box 3</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam atque voluptates aspernatur placeat, deserunt asperiores velit quam error quaerat soluta veritatis dignissimos quos, doloremque blanditiis dolorem recusandae. Sapiente, voluptate, et.</p>
		</div>
	</div>
</body>
</html>


 

            

Hinweise

Der Container wird "display:flex;" und "flex-wrap: wrap;" zum Umbruch vorbereitet.

Die Boxen erhalten eine Minimalbreite "min-width: 400px;" und Basis-Wert "flex-basis: 33.3333%;" .

Wachsende Boxen werden mit "flex-grow: 1;" erreicht. Wird der Wert zurückgesetzt "flex-grow: 0;", findet der gleiche Umbruch statt, aber die Boxen behalten ihre Minimalgrösse.

Padding und Margin in Flex-Elementen verändert die Grössenangaben, da es die Werte kumuliert. Mit "box-sizing: border-box;" wird dies verhindert, der Basis-Wert bleibt auch mit Padding. Werden die Ränder von body und container zurückgesetzt, finden die Umbrüche beim Wechsel der Breite des Browserfensters, entsprechend der Minimalbreite eines Fex-Elements statt (bei "min-width: 400px;"):

Browserfenster 400Pixel Breite: Die drei Boxen sind untereinander
Browserfenster 800Pixel Breite: Zwei Boxen füllen die obere Zeile, die dritte Box füllt die untere Zeile
Browserfenster 1200Pixel Breite: Die drei Boxen sind nebeneinander

4 Boxen verändern den Flex-Basis-Wert auf "flex-basis: 25%;" und die Maximalbreite auf "min-width: 300px;". Dabei ergeben sich folgende Werte für den Umbruch:

Browserfenster 300Pixel Breite: Die vier Boxen sind untereinander
Browserfenster 600Pixel Breite: Zwei Boxen füllen die obere Zeile, zwei Boxen füllen die untere Zeile
Browserfenster 900Pixel Breite: Drei Boxen füllen die obere Zeile, die vierte Box füllt die untere Zeile
Browserfenster 1200Pixel Breite: Die drei Boxen sind nebeneinander

Beisiel mit 4 Boxen

DB-Table: flex-grow