flex-wrap

Die Flex-Box-Eigenschaft "flex-wrap:wrap;" ermöglicht es, dass eine Reihen von Elementen auf Zeilen umbrochen werden. Mit dem Standardverhalter "flex-wrap:nowrap;" werden die Boxen auf einer Zeile belassen und skaliert.

flex-wrap:wrap;
Die Flex-Items können mehrere Reihen bilden
flex-wrap:wrap-reverse;
Die Flex-Items können mehrere Reihen bilden. Die Reihen nicht die Elemente werden in umgekehrter Reihenfolge aufgeführt.
flex-wrap:nowrap; (Standard)
Die Flex-Items werden in einer einzigen Reihe aufgeführt.

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-wrap</title>
	<style>
    	#container {
		width:100%;
		height:300px;
		background: lightgrey;
		display:flex;
		flex-wrap:wrap;
	}
	div {
		background: SteelBlue;
		border: 1px solid black;
		width: 300px;
		height: 100px;
	 }
	</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 id="box4">Box 4</div>
		<div id="box5">Box 5</div>
		<div id="box6">Box 6</div>
	</div>
</body>
</html>


 

            

Anregungen

Die Eigenschaft "flex-wrap" wird für den Umbruch von Elemente mit festegelegter Breite benutzt. Die Elemente können dazu auch verschiedenen Breiten aufweisen (Bspw. Hoch- und Querliegende Bilder nebeneinander).

Ergänze und verändere die CSS-Deklarationen der einzelnen Boxen, untersuche ihr Verhalten:

#box1 {width:400px;}
#box2 {width:100px;}
#box5 {width:100px;}

Untersuche das Umbruchverhalten der Boxen mit den möglichen Eigenschaften die "flex-wrap" bietet:

flex-wrap:wrap;
flex-wrap:wrap-reverse;
flex-wrap:nowrap;

DB-Table: flex-wrap