Η ιδιότητα align-self

Η ιδιότητα align-self ορίζει τη στοίχιση κατά μήκος του εγκάρσιου άξονα για ένα συγκεκριμένο flex-στοιχείο και κατά μήκος του κατακόρυφου άξονα για ένα μεμονωμένο στοιχείο σε ένα grid. Ουσιαστικά, αυτή η ιδιότητα αντιπροσωπεύει την ιδιότητα align-items, αλλά για ένα συγκεκριμένο στοιχείο.

Σύνταξη

επιλογέας {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Τιμές

Τιμή	Περιγραφή
`flex-start`	Το στοιχείο πιέζεται στην αρχή του εγκάρσιου άξονα.
`flex-end`	Το στοιχείο πιέζεται στο τέλος του εγκάρσιου άξονα.
`center`	Το στοιχείο βρίσκεται στο κέντρο του εγκάρσιου άξονα.
`baseline`	Το στοιχείο ευθυγραμμίζεται κατά μήκος της γραμμής βάσης του. Η γραμμή βάσης είναι μια φανταστική γραμμή, που διέρχεται από το κάτω άκρο των χαρακτήρων χωρίς να λαμβάνει υπόψη τις προεξοχές, για παράδειγμα, όπως στα γράμματα `'p'`, `'q'`, `'y'`, `'g'`.
`stretch`	Το στοιχείο τεντώνεται, καταλαμβάνοντας όλο τον διαθέσιμο χώρο κατά μήκος του εγκάρσιου άξονα, αλλά εξακολουθούν να λαμβάνονται υπόψη τα `min-width` και `max-width`, εάν έχουν οριστεί. Εάν έχει οριστεί πλάτος και ύψος για το στοιχείο - το `stretch` θα αγνοηθεί.
`auto`	Το στοιχείο θα ευθυγραμμιστεί όπως ορίζεται στην ιδιότητα `align-items`.

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

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

Σε αυτό το παράδειγμα, όλα τα στοιχεία έχουν οριστεί στην τιμή flex-start (ιδιότητα align-items), ενώ στο τρίτο στοιχείο - align-self στην τιμή stretch:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: stretch;
}

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

Σε αυτό το παράδειγμα, για όλα τα στοιχεία στην ιδιότητα align-items έχει οριστεί η τιμή flex-start, ενώ στο τρίτο στοιχείο - align-self στην τιμή flex-end:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: flex-end;
}

Παράδειγμα . Στοίχιση στην αρχή του κατακόρυφου άξονα σε grid

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

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: start;
}

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

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

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: center;
}

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

Ας ορίσουμε στοίχιση για το πρώτο μας στοιχείο στο grid στο τέλος του κατακόρυφου άξονα:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	align-self: end;
}

Δείτε επίσης

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