Ιδιότητα align-content

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

Σύνταξη

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

Τιμές

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

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

Σε αυτό το παράδειγμα, ο άξονας, κατά τον οποίο γίνεται η στοίχιση είναι προσανατολισμένος από πάνω προς τα κάτω, δηλαδή είναι εγκάρσιος. Όπως φαίνεται από το αποτέλεσμα, όλα μας τα στοιχεία είναι σφιγμένα στο πάνω μέρος του:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

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

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

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	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 μπλοκ
η ιδιότητα justify-content,
που ορίζει τη στοίχιση κατά τον κύριο άξονα
η ιδιότητα align-items,
που ορίζει τη στοίχιση κατά τον εγκάρσιο άξονα
η ιδιότητα flex-wrap,
που ορίζει την πολυγραμμικότητα των flex μπλοκ
η ιδιότητα flex-flow,
συντόμευση για το flex-direction και flex-wrap
η ιδιότητα order,
που ορίζει τη σειρά των flex μπλοκ
η ιδιότητα align-self,
που ορίζει τη στοίχιση ενός μπλοκ
η ιδιότητα place-content,
που ορίζει τη στοίχιση κατά τους κύριους και εγκάρσιους άξονες