justify-content

Mit der Flex-Box-Eigenschaft "justify-content" können Elemente innerhalb des Containers platziert werden.

justify-content:flex-start; (Standard)
Die Elemente werden links ausgerichtet.
justify-content:flex-end;
Die Elemente werden rechts ausgerichtet.
justify-content:center;
Die Flex-Items werden in der Mitte angeordnet.
justify-content:space-between;
Das erste Element befindet sich am Startpunkt das letzte am Endpunkt. Die anderen Elemente werden entsprechend dazwischen aufgereiht.
justify-content:space-around;
Alle Element bekommen den gleichen Zwischenraum. Auch am Anfang und am Ende befindet sich dieser Zwischenraum.

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



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


 

            

Anregungen

Verändere die CSS-Eigenschaft "justify-content:flex-start;" und untersuche das wechselnde Verhalten der Div-Elemente. (Prüfe jeweils nur eine Eigenschaft, andernfalls werde die darüberliegenden überschrieben.) Folgende Möglichkeiten stehen zur Verfügung:

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

In vielen Fällen muss zusätzlich die Richtung der Elemente angegeben werden. So wird die CSS-Eigenschaft "flex-direction" gleichzeitig angewendet. Schreibe sie zusätzlich in den Flex-Container. Folgende Möglichkeiten stehen zur Verfügung:

flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;

DB-Table: justify-content