Ιδιότητα place-content

Η ιδιότητα place-content ορίζει τη στοίχιση των στοιχείων κατά μήκος του κύριου και του εγκάρσιου άξονα για εύκαμπτα στοιχεία, και κατά μήκος του οριζόντιου και κάθετου άξονα για πλέγματα. Η πρώτη τιμή καθορίζει τη στοίχιση κατά μήκος του κύριου (οριζόντιου) άξονα, η δεύτερη τιμή - του εγκάρσιου (κάθετου). Η ιδιότητα εφαρμόζεται στο γονικό στοιχείο.

Σύνταξη

επιλογέας {
	place-content: κύριος_άξονας εγκάρσιος_άξονας;
}

Παράδειγμα . Στοίχιση κατά μήκος της αρχής του κύριου άξονα και του κέντρου του εγκάρσιου άξονα

Τώρα τα στοιχεία είναι σφιγμένα στο πάνω μέρος του κύριου άξονα και ταυτόχρονα βρίσκονται στο κέντρο του εγκάρσιου:

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

#parent {
	display: flex;
	place-content: start 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: flex;
	place-content: center end;
	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: flex;
	place-content: end start;
	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;
	place-content: start 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;
}

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

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

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

#parent {
	display: grid;
	place-content: center 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;
	place-content: end 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;
}

Δείτε επίσης

η ιδιότητα align-content,
που ορίζει τη στοίχιση κατά μήκος του εγκάρσιου ή κάθετου άξονα
η ιδιότητα justify-content,
που ορίζει τη στοίχιση κατά μήκος του κύριου άξονα