Ιδιότητα align-items

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

Σύνταξη

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

Τιμές

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

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

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

Αυτήν τη στιγμή ο κύριος άξονας κατευθύνεται από αριστερά προς τα δεξιά, και κατά μήκος του εγκάρσιου άξονα τα στοιχεία τεντώνονται σε όλο το ύψος:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Παράδειγμα . Τιμή stretch + διαστάσεις στοιχείου

Αυτήν τη στιγμή για τα στοιχεία έχει οριστεί πλάτος και ύψος, επομένως η τιμή stretch για την ιδιότητα align-items θα αγνοηθεί:

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

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

Παράδειγμα . Τιμή flex-start χωρίς διαστάσεις στοιχείου

Αυτήν τη στιγμή τα στοιχεία θα είναι στερεωμένα στην κορυφή:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

Παράδειγμα . Τιμή flex-start + διαστάσεις στοιχείου

Αυτήν τη στιγμή τα στοιχεία θα παραμείνουν στερεωμένα στην κορυφή, ωστόσο θα έχουν καθορισμένο πλάτος και ύψος:

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

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

Παράδειγμα . Τιμή flex-end + διαστάσεις στοιχείου

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

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

#parent {
	display: flex;
	align-items: 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;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Παράδειγμα . Τιμή center, στοιχεία διαφορετικού μεγέθους

Αυτήν τη στιγμή τα στοιχεία έχουν διαφορετικό μέγεθος ως προς το ύψος (αυτήν τη στιγμή επεκτείνονται από το κείμενο, αλλά μπορεί να οριστεί και height), το πλάτος είναι το ίδιο για όλα, καθώς έχει οριστεί η ιδιότητα width:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

Παράδειγμα . Τιμή baseline, στοιχεία διαφορετικού μεγέθους

Και έτσι φαίνεται η στοίχιση κατά μήκος της βασικής γραμμής:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	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;
	align-items: flex-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;
}

Και τώρα ας δούμε το πλέγμα μας στον debugger του browser:

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

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

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

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

Ας δούμε την εμφάνιση του πλέγματος στον debugger:

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

Ας αλλάξουμε ξανά τη στοίχιση των στοιχείων, αυτήν τη φορά στο τέλος του κατακόρυφου άξονα:

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

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

Και τώρα ας δούμε πώς φαίνεται το πλέγμα μας μέσω του debugger:

Δείτε επίσης

η ιδιότητα flex-direction,
που ορίζει την κατεύθυνση των αξόνων των flex πλαισίων
η ιδιότητα justify-content,
που ορίζει τη στοίχιση κατά μήκος του κύριου άξονα
η ιδιότητα 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