Ιδιότητα justify-content

Η ιδιότητα justify-content ορίζει τη στοίχιση των στοιχείων κατά μήκος του κύριου άξονα για flex πλαίσια και κατά μήκος του οριζόντιου άξονα για πλέγματα. Εφαρμόζεται στο γονικό στοιχείο.

Σύνταξη

επιλογέας {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Τιμές

Τιμή	Περιγραφή
`flex-start`	Τα μπλοκ είναι σφιγμένα στην αρχή του κύριου (οριζόντιου) άξονα.
`flex-end`	Τα μπλοκ είναι σφιγμένα στο τέλος του κύριου (οριζόντιου) άξονα.
`center`	Τα μπλοκ βρίσκονται στο κέντρο του κύριου (οριζόντιου) άξονα.
`space-between`	Τα μπλοκ κατανέμονται κατά μήκος του κύριου (οριζόντιου) άξονα, ενώ το πρώτο στοιχείο είναι σφιγμένο στην αρχή του άξονα, και το τελευταίο - στο τέλος.
`space-around`	Τα μπλοκ κατανέμονται κατά μήκος του κύριου (οριζόντιου) άξονα, ενώ μεταξύ του πρώτου μπλοκ και της αρχής του άξονα, του τελευταίου μπλοκ και του τέλους του άξονα υπάρχει το ίδιο κενό, όπως και μεταξύ των υπόλοιπων μπλοκ. Ωστόσο, δεν είναι ίσα, όπως θα μπορούσε να φαίνεται: τα κενά αθροίζονται και μεταξύ δύο μπλοκ η απόσταση είναι δύο φορές μεγαλύτερη από ότι μεταξύ ενός μπλοκ και της αρχής/τέλους του άξονα.

Προεπιλεγμένη τιμή: flex-start.

Παράδειγμα . Τιμή flex-start

Αυτή τη στιγμή ο άξονας κατευθύνεται από αριστερά προς τα δεξιά (αυτό κάνει το flex-direction: row), και τα μπλοκ είναι σφιγμένα στην αριστερή πλευρά:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Παράδειγμα . Τιμή flex-end

Σε αυτό το παράδειγμα ο άξονας επίσης κατευθύνεται από αριστερά προς τα δεξιά, αλλά τα μπλοκ είναι σφιγμένα στη δεξιά πλευρά, καθώς ορίστηκε το justify-content στην τιμή flex-end:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Παράδειγμα . Τιμή center

Αυτή τη στιγμή τα μπλοκ θα βρίσκονται στο κέντρο ανεξάρτητα από την κατεύθυνση του κύριου άξονα:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Παράδειγμα . Τιμή space-between

Τα μπλοκ κατανέμονται κατά μήκος του κύριου άξονα, ενώ το πρώτο στοιχείο είναι σφιγμένο στην αρχή του άξονα, και το τελευταίο - στο τέλος:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Παράδειγμα . Τιμή space-around

Τα μπλοκ κατανέμονται κατά μήκος του κύριου άξονα, ενώ μεταξύ του πρώτου μπλοκ και της αρχής του άξονα, του τελευταίου μπλοκ και του τέλους του άξονα υπάρχει το ίδιο κενό, όπως και μεταξύ των υπόλοιπων μπλοκ. Ωστόσο, τα κενά αθροίζονται και μεταξύ δύο μπλοκ η απόσταση είναι δύο φορές μεγαλύτερη από ότι μεταξύ ενός μπλοκ και της αρχής/τέλους του άξονα:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Παράδειγμα . Τιμή center. Άξονας προς τα κάτω

Ας αλλάξουμε την κατεύθυνση του κύριου άξονα, ορίζοντας το flex-direction στην τιμή column:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Παράδειγμα . Τιμή space-between. Άξονας προς τα κάτω

Αυτή τη στιγμή τα μπλοκ θα κατανεμηθούν ομοιόμορφα κατά μήκος της κατακόρυφης διεύθυνσης:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Παράδειγμα . Στοίχιση στην αρχή του οριζόντιου άξονα (γραμμών) στο πλέγμα

Ας ορίσουμε τη στοίχιση για τα στοιχεία μας στην αρχή του οριζόντιου άξονα:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Παράδειγμα . Στοίχιση στο κέντρο του οριζόντιου άξονα στο πλέγμα

Και τώρα ας ορίσουμε τη στοίχιση για τα στοιχεία μας στο κέντρο του οριζόντιου άξονα:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Παράδειγμα . Στοίχιση στο τέλος του οριζόντιου άξονα στο πλέγμα

Ας ορίσουμε τη στοίχιση για τα στοιχεία μας στο τέλος του οριζόντιου άξονα:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Δείτε επίσης

η ιδιότητα flex-direction,
που ορίζει την κατεύθυνση των αξόνων των flex πλαισίων
η ιδιότητα align-items,
που ορίζει τη στοίχιση κατά μήκος του εγκάρσιου άξονα
η ιδιότητα flex-wrap,
που ορίζει την πολυγραμμικότητα των flex πλαισίων
η ιδιότητα flex-flow,
συντομογραφία για τα flex-direction και flex-wrap
η ιδιότητα order,
που ορίζει τη σειρά των flex πλαισίων
η ιδιότητα align-self,
που ορίζει τη στοίχιση ενός μπλοκ
η ιδιότητα flex-basis,
που ορίζει το μέγεθος ενός συγκεκριμένου flex πλαισίου
η ιδιότητα flex-grow,
που ορίζει την "απληστία" των flex πλαισίων
η ιδιότητα flex-shrink,
που ορίζει τη συμπιεστότητα των flex πλαισίων
η ιδιότητα flex,
συντομογραφία για τα flex-grow, flex-shrink και flex-basis