Η place-itemsιδιότητα στο CSS είναι συντομογραφία για τις ιδιότητες align-itemsκαι τις justify-itemsιδιότητες, συνδυάζοντάς τις σε μία μόνο δήλωση.
Μια συνηθισμένη χρήση κάνει οριζόντιο και κατακόρυφο κεντράρισμα με το πλέγμα:
.center-inside-of-me ( display: grid; place-items: center; )Αυτές οι ιδιότητες έχουν αξιοποιηθεί με την εισαγωγή διατάξεων Flexbox και Grid, αλλά εφαρμόζονται επίσης σε:
- Κουτιά επιπέδου μπλοκ
- Κουτιά απόλυτα τοποθετημένα
- Στατική θέση απόλυτα τοποθετημένων κουτιών
- Πίνακες κελιά
Σύνταξη
Η ιδιότητα δέχεται δύο τιμές, η πρώτη για align-itemsκαι η δεύτερη για justify-items. Ως ανανέωση, align-itemsευθυγραμμίζει το περιεχόμενο κατά μήκος του κατακόρυφου (στήλη) άξονα ενώ justify-itemsευθυγραμμίζει κατά μήκος του οριζόντιου (σειρά) άξονα.
.item ( display: grid; place-items: start center; )Αυτό είναι το ίδιο με το γράψιμο:
.item ( display: grid; align-items: start; justify-items: center; )Εάν παρέχεται μόνο μία τιμή, τότε ορίζει και τις δύο ιδιότητες. Για παράδειγμα, αυτό:
.item ( display: grid; place-items: start; )… Είναι το ίδιο με το να γράφεις αυτό:
.item ( display: grid; align-items: start; justify-items: start; )Αποδεκτές τιμές
Αυτό που κάνει αυτήν την ιδιότητα ενδιαφέρουσα είναι ότι συμπεριφέρεται διαφορετικά με βάση το πλαίσιο που χρησιμοποιείται. Για παράδειγμα, ορισμένες τιμές ισχύουν μόνο για το Flexbox και δεν θα λειτουργούν σε μια ρύθμιση πλέγματος. Επιπλέον, ορισμένες τιμές ισχύουν για την align-itemsιδιότητα όπου άλλες ισχύουν στο justify-itemsπλάι.
Περαιτέρω, οι ίδιες οι τιμές μπορούν να θεωρηθούν ότι εμπίπτουν σε έναν αριθμό τύπων ευθυγράμμισης: συμφραζόμενα, κατανομή, θέση (η οποία γίνεται αυτο-θέση εάν εφαρμοστεί απευθείας σε ένα θυγατρικό στοιχείο στη διάταξη) και τη βασική γραμμή.
Η Rachel Andrew έχει ένα εξαιρετικό φύλλο εξαπάτησης Box Alignment που βοηθά στην απεικόνιση του αποτελέσματος των τιμών
| αξία | Τύπος | Περιγραφή |
|---|---|---|
auto | Συναφής | Η τιμή προσαρμόζεται ανάλογα με το περιβάλλον του στοιχείου. Χρησιμοποιεί την justify-itemsτιμή του γονικού στοιχείου του στοιχείου. Εάν δεν υπάρχει γονέας ή εφαρμόζεται σε ένα στοιχείο με το οποίο τοποθετείται absolute, τότε η τιμή γίνεται normal. |
normal | Συναφής | Λαμβάνει την προεπιλεγμένη συμπεριφορά του περιβάλλοντος διάταξης όπου εφαρμόζεται. • Διατάξεις επιπέδου μπλοκ: start• Απόλυτη τοποθέτηση: startγια αντικατασταθέντα απόλυτα στοιχεία και stretchγια όλους τους άλλους• Διατάξεις πίνακα: Η τιμή αγνοείται • Διατάξεις Flexbox: Η τιμή αγνοείται • Διατάξεις πλέγματος:, stretchεκτός εάν χρησιμοποιείται λόγος διαστάσεων ή εγγενές μέγεθος όπου συμπεριφέρεται αρέσειstart |
stretch | Κατανομή | Επεκτείνει το στοιχείο και στις δύο άκρες του δοχείου κάθετα align-itemsκαι οριζόντια για justify-items. |
start | Θέσεως | Όλα τα στοιχεία ευθυγραμμίζονται μεταξύ τους στην αρχική (αριστερή) άκρη του δοχείου |
end | Θέσεως | Όλα τα στοιχεία ευθυγραμμίζονται μεταξύ τους στο άκρο (δεξιά) του δοχείου |
center | Θέσεως | Τα στοιχεία ευθυγραμμίζονται το ένα δίπλα στο άλλο προς το κέντρο του δοχείου |
left | Θέσεως | Τα στοιχεία ευθυγραμμίζονται το ένα δίπλα στο άλλο προς την αριστερή πλευρά του δοχείου. Εάν η ιδιότητα δεν είναι παράλληλη με έναν τυπικό άξονα πάνω, δεξιά, κάτω, αριστερά, τότε συμπεριφέρεται όπως end. |
right | Θέσεως | Τα στοιχεία ευθυγραμμίζονται το ένα δίπλα στο άλλο προς τη δεξιά πλευρά του δοχείου. Εάν η ιδιότητα δεν είναι παράλληλη με έναν τυπικό επάνω, δεξιά, κάτω, αριστερό άξονα, τότε συμπεριφέρεται όπως start. |
flex-start | Θέσεως | Μια τιμή μόνο για flexbox (που πέφτει πίσω start) όπου τα αντικείμενα συσκευάζονται προς την αρχική άκρη του δοχείου. |
flex-end | Θέσεως | Μια τιμή μόνο για flexbox (που πέφτει πίσω end) όπου τα αντικείμενα συσκευάζονται προς την άκρη του δοχείου. |
self-start | Αυτο-Θέση | Επιτρέπει σε ένα στοιχείο σε διάταξη να ευθυγραμμιστεί με την άκρη του κοντέινερ βάσει της δικής του αρχικής πλευράς. Βασικά υπερισχύει της τιμής που έχει ο γονέας |
self-end | Αυτο-Θέση | Επιτρέπει σε ένα στοιχείο σε διάταξη να ευθυγραμμιστεί με την άκρη του κοντέινερ βάσει της δικής του τελικής πλευράς αντί να κληρονομήσει την τιμή θέσης του κοντέινερ. Βασικά υπερισχύει της τιμής που έχει ο γονέας. |
first baselinelast baseline | Βασική γραμμή | Ευθυγραμμίζει όλα τα στοιχεία σε μια ομάδα (δηλαδή κελιά σε μια σειρά) αντιστοιχίζοντας τις γραμμές ευθυγράμμισης. Προεπιλογές στο firstεάν baselineχρησιμοποιείται από μόνη της. |
Υποστήριξη προγράμματος περιήγησης
Αυτή η ιδιότητα περιλαμβάνεται στην προδιαγραφή CSS Box Alignment Model Level 3.
Η υποστήριξη του προγράμματος περιήγησης έχει γίνει αρκετά ευρεία και σε μεγάλο βαθμό απλώς χρησιμοποιήσιμη:
- Edge 79+ (μετάβαση μετά το Chromium)
- Firefox 45+
- Chrome 59+
- Safari 11+
βιβλιογραφικές αναφορές
- CSS Box Alignment Model Level 3 - Η επίσημη προδιαγραφή όπου το
place-itemsακίνητο ορίζεται αρχικά. - Δίκτυο προγραμματιστών Mozilla - Η τεκμηρίωση της ομάδας Mozilla.
- Box Alignment Cheat Sheet - Το περίγραμμα της Rachel Andrew είναι ένας εξαιρετικά χρήσιμος πόρος για την κατανόηση των όρων ευθυγράμμισης και των ορισμών τους.