align-content

Die Eigenschaft "align-content" bezieht sich auf die vertikale Anordnung der Elemente auf einer oder mehrerer Zeilen.

Sie können:

oben, unten oder zentriert angeordnet werden > flex-start, flex-end, center
Abstand in der dazwischen oder drum herum > space-between, space-around
oder auf die gesamte Höhe verteilt werden > strech

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - align-content</title>
	<style>
	#container {
		width:100%;
		height:360px;
		background: lightgrey;
		display: flex;
		flex-wrap: wrap;
 		align-content: flex-start;
	}
	div {
		background: SteelBlue;
		border: 1px solid black;
		height:100px;
		width:300px;
	 } 
		#box1, #box4 {width: 80px;}
	</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

Verändere die Eigenschaft von "align-content" um das Verhalten der Zeilen innerhalb des Containers zu untersuchen. (Wenn mehrere Zeilen vertikal angeordnet werden, muss zudem der Zeilenumbruch "flex-wrap:wrap;" aktiviert sein.

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;

Werden die Boxen vertikal auf die gesamte Höhe gestreckt, dürfen sie keine fixen Werte für die Höhe besitzen. Entferne im Element "div":

height:100px;

und teste das "strechen" der Boxen mit:

align-content: strech;

DB-Table: align-content