Η ιδιότητα justify-content

Η ιδιότητα justify-content ορίζει τη διάταξη ή στοίχιση των στοιχείων αριστερά, δεξιά, κέντρο κλπ. όταν ισχύει: flex-direction:row; και επάνω, κάτω, κέντρο κλπ. όταν ισχύει: flex-direction:column;.

Η προκαθορισμένη τιμή είναι η flex-start και συνολικά δέχεται τις παρακάτω τιμές.

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

Παραδείγματα για οριζόντια στοίχιση

Θεωρείται ότι ισχύει: flex-direction:row;

Παράδειγμα με justify-content: flex-start; (Στοίχιση των στοιχείων αριστερά)

<!DOCTYPE html>
		<html>
			<head>
				<title>justify-content</title>
				<meta charset="utf-8" />
				<style>
					.flex-container {
						display: flex;
						justify-content: flex-start;
						background-color: orange;
					}

					.flex-container > div {
						background-color: #f1f1f1;
						margin: 10px;
						padding: 20px;
						font-size: 20px;
					}
				</style>
			</head>
			<body>
				<div class="flex-container">
					<div>flex element 1</div>
					<div>flex element 2</div>
					<div>flex element 3</div>
			</body>
		</html>
flex element 1
flex element 2
flex element 3

Παράδειγμα με justify-content: flex-end; (Στοίχιση των στοιχείων δεξιά)

<!DOCTYPE html>
		<html>
			<head>
				<title>justify-content</title>
				<meta charset="utf-8" />
				<style>
					.flex-container {
						display: flex;
						justify-content: flex-end;
						background-color: orange;
					}

					.flex-container > div {
						background-color: #f1f1f1;
						margin: 10px;
						padding: 20px;
						font-size: 20px;
					}
				</style>
			</head>
			<body>
				<div class="flex-container">
					<div>flex element 1</div>
					<div>flex element 2</div>
					<div>flex element 3</div>
			</body>
		</html>
flex element 1
flex element 2
flex element 3

Παράδειγμα με justify-content: center; (Στοίχιση των στοιχείων στο κέντρο)

<!DOCTYPE html>
		<html>
			<head>
				<title>justify-content</title>
				<meta charset="utf-8" />
				<style>
					.flex-container {
						display: flex;
						justify-content: center;
						background-color: orange;
					}

					.flex-container > div {
						background-color: #f1f1f1;
						margin: 10px;
						padding: 20px;
						font-size: 20px;
					}
				</style>
			</head>
			<body>
				<div class="flex-container">
					<div>flex element 1</div>
					<div>flex element 2</div>
					<div>flex element 3</div>
			</body>
		</html>
flex element 1
flex element 2
flex element 3

Παράδειγμα με justify-content: space-around; (Στοίχιση των στοιχείων με ίσα περιθώρια αριστερά και δεξιά)

<!DOCTYPE html>
		<html>
			<head>
				<title>justify-content</title>
				<meta charset="utf-8" />
				<style>
					.flex-container {
						display: flex;
						justify-content: space-around;
						background-color: orange;
					}

					.flex-container > div {
						background-color: #f1f1f1;
						margin: 10px;
						padding: 20px;
						font-size: 20px;
					}
				</style>
			</head>
			<body>
				<div class="flex-container">
					<div>flex element 1</div>
					<div>flex element 2</div>
					<div>flex element 3</div>
			</body>
		</html>
flex element 1
flex element 2
flex element 3

Παράδειγμα με justify-content: space-between; (Ο κενός χώρος μοιράζεται ανάμεσα στα στοιχεία)

<!DOCTYPE html>
		<html>
			<head>
				<title>justify-content</title>
				<meta charset="utf-8" />
				<style>
					.flex-container {
						display: flex;
						justify-content: space-between;
						background-color: orange;
					}

					.flex-container > div {
						background-color: #f1f1f1;
						margin: 10px;
						padding: 20px;
						font-size: 20px;
					}
				</style>
			</head>
			<body>
				<div class="flex-container">
					<div>flex element 1</div>
					<div>flex element 2</div>
					<div>flex element 3</div>
			</body>
		</html>
flex element 1
flex element 2
flex element 3

Παράδειγμα με justify-content: space-evenly; (Ο κενός χώρος μοιράζεται ανάμεσα στα στοιχεία και στις πλευρές του περιέκτη)

<!DOCTYPE html>
		<html>
			<head>
				<title>justify-content</title>
				<meta charset="utf-8" />
				<style>
					.flex-container {
						display: flex;
						justify-content: space-evenly;
						background-color: orange;
					}

					.flex-container > div {
						background-color: #f1f1f1;
						margin: 10px;
						padding: 20px;
						font-size: 20px;
					}
				</style>
			</head>
			<body>
				<div class="flex-container">
					<div>flex element 1</div>
					<div>flex element 2</div>
					<div>flex element 3</div>
			</body>
		</html>
flex element 1
flex element 2
flex element 3

Παραδείγματα για κάθετη στοίχιση

Ισχύει: flex-direction:column;

Οι τιμές για την οριζόντια στοίχιση ισχύουν και για την κάθετη στοίχιση.

Παράδειγμα με justify-content: flex-end; και flex-direction: column;

<!DOCTYPE html>
		<html>
			<head>
				<title>justify-content</title>
				<meta charset="utf-8" />
				<style>
					.flex-container {
						display: flex;
						justify-content: flex-end;
						flex-direction: column;
						background-color: orange;
					}

					.flex-container > div {
						background-color: #f1f1f1;
						margin: 10px;
						padding: 20px;
						font-size: 20px;
					}
				</style>
			</head>
			<body>
				<div class="flex-container">
					<div>flex element 1</div>
					<div>flex element 2</div>
					<div>flex element 3</div>
			</body>
		</html>
flex element 1
flex element 2
flex element 3