Η justify-itemsιδιότητα είναι δευτερεύουσα ιδιότητα του CSS Box Alignment Module που ελέγχει βασικά την ευθυγράμμιση στοιχείων πλέγματος εντός του πεδίου εφαρμογής τους.
.element ( justify-items: center; )justify-itemsευθυγραμμίζει τα στοιχεία πλέγματος κατά μήκος του άξονα γραμμής (inline). Συγκεκριμένα, αυτό το ξενοδοχείο σας επιτρέπει να ορίσετε την ευθυγράμμιση των στοιχείων μέσα σε ένα δοχείο πλέγμα (όχι το ίδιο το δίκτυο) σε μια θέση συγκεκριμένες (π.χ. start, centerκαι end) ή με μια συμπεριφορά (π.χ. autoή stretch).
Όταν justify-itemsχρησιμοποιείται, ορίζει επίσης την προεπιλεγμένη justify-selfτιμή για όλα τα στοιχεία πλέγματος, αν και αυτό μπορεί να παρακαμφθεί σε επίπεδο παιδιού χρησιμοποιώντας την justify-selfιδιότητα του ίδιου του παιδιού.
.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )Σύνταξη
justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )- Αρχική τιμή:
legacy - Ισχύει για: όλα τα στοιχεία
- Κληρονομική: όχι
- Υπολογισμένη τιμή: όπως καθορίζεται
- Τύπος κινούμενης εικόνας: διακριτός
Αξίες
/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;Βασικές τιμές λέξεων-κλειδιών
stretch: Προεπιλεγμένη τιμή. Ευθυγραμμίζει στοιχεία για να γεμίσει ολόκληρο το πλάτος του κελιού στοιχείου πλέγματοςauto: ίδια με την τιμή τουjustify-itemsγονέα.normal: Ενώ βλέπουμε ναjustify-itemsχρησιμοποιείται πιο συχνά σε διάταξη πλέγματος, είναι τεχνικά για οποιαδήποτε ευθυγράμμιση πλαισίου καιnormalσημαίνει διαφορετικά πράγματα σε διαφορετικό περιβάλλον διάταξης, όπως:- διατάξεις σε επίπεδο μπλοκ (
start) - διατάξεις πλέγματος
stretch - flexbox (αγνοείται)
- κελιά πίνακα (αγνοήθηκαν)
- απόλυτα τοποθετημένες διατάξεις (
start) - κουτιά απόλυτα τοποθετημένα (
stretch) - αντικαταστάθηκαν κουτιά απόλυτα τοποθετημένα (
start)
- διατάξεις σε επίπεδο μπλοκ (
.container ( justify-items: stretch; )
Τιμές ευθυγράμμισης βάσης
Αυτό ευθυγραμμίζει τη γραμμή ευθυγράμμισης της πρώτης ή της τελευταίας γραμμής βάσης του πλαισίου με την αντίστοιχη γραμμή βάσης του περιβάλλοντος ευθυγράμμισης.
.container ( justify-items: baseline; )- Η εναλλακτική ευθυγράμμιση για το
first baselineείναιsafe start. - Η εναλλακτική ευθυγράμμιση για το
last baselineείναιsafe end. baselineαντιστοιχεί σεfirst baselineόταν χρησιμοποιείται μόνο του
Στην παρακάτω επίδειξη (εμφανίζεται καλύτερα στον Firefox), βλέπουμε πώς τα στοιχεία ευθυγραμμίζονται με τη γραμμή βάσης ενός πλέγματος που βασίζεται στον κύριο άξονα.
Τιμές ευθυγράμμισης θέσης
start: Ευθυγραμμίζει τα στοιχεία στο αρχικό άκρο του κοντέινερ ευθυγράμμισηςend: Ευθυγραμμίζει τα στοιχεία με το δοχείο ευθυγράμμισης άκρωνcenter: Ευθυγραμμίζει τα στοιχεία στο κέντρο του κοντέινερ ευθυγράμμισηςleft: Ευθυγραμμίζει στοιχεία στα αριστερά του κοντέινερ ευθυγράμμισηςright: Ευθυγραμμίζει στοιχεία στα δεξιά του κοντέινερ ευθυγράμμισηςself-start: Ευθυγραμμίζει τα στοιχεία στην αρχή κάθε κελιού στοιχείου πλέγματοςself-end: Ευθυγραμμίζει τα στοιχεία στο τέλος κάθε κελιού στοιχείου πλέγματος
.container ( justify-items: )
.container ( justify-items: )
.container ( justify-items: center; )
Τιμές ευθυγράμμισης υπερχείλισης
Η ιδιότητα υπερχείλισης καθορίζει πώς θα εμφανίσει τα περιεχόμενα του πλέγματος όταν το περιεχόμενο υπερβαίνει τα όρια του πλέγματος. Έτσι, όταν τα περιεχόμενα είναι μεγαλύτερα από το δοχείο ευθυγράμμισης, θα έχει ως αποτέλεσμα υπερχείλιση που μπορεί να οδηγήσει σε απώλεια δεδομένων. Για να αποφευχθεί αυτό, μπορούμε να χρησιμοποιήσουμε την safeτιμή που λέει στο πρόγραμμα περιήγησης να αλλάξει ευθυγράμμιση, ώστε να μην υπάρχει απώλεια δεδομένων.
safe: Εάν ένα στοιχείο υπερχειλίσει το κοντέινερ ευθυγράμμισης,startχρησιμοποιείται η λειτουργία.unsafe: Η τιμή ευθυγράμμισης διατηρείται ως έχει, ανεξάρτητα από το μέγεθος του αντικειμένου ή το κοντέινερ ευθυγράμμισης.
Τιμές παλαιού τύπου
legacy: Όταν χρησιμοποιείται με ένα κατευθυντικό λέξη-κλειδί (π.χ.right,leftήcenter), ότι η λέξη-κλειδί που περνάει στους απογόνους να κληρονομήσει. Αλλά αν ο απόγονος δηλώσειjustify-self: auto;τότεlegacyαγνοείται αλλά εξακολουθεί να σέβεται τη λέξη-κλειδί κατεύθυνσης. Η τιμή υπολογίζεται στην κληρονομική τιμή εάν δεν παρέχεται κατευθυντήρια λέξη-κλειδί. Διαφορετικά, υπολογίζειnormal.
Διαδήλωση
Περισσότερες πληροφορίες
- CSS Box Alignment Module Level 3 (Προσχέδιο εργασίας)
- Ένας πλήρης οδηγός για το πλέγμα
- Ένας πλήρης οδηγός για το Flexbox
Υποστήριξη προγράμματος περιήγησης
Το πρόγραμμα περιήγησης υποστηρίζει ένα justify-itemsείδος εκτέλεσης της γκάμας, δεδομένου ότι χρησιμοποιείται σε πολλαπλά περιβάλλοντα διάταξης, όπως πλέγμα, flexbox, κελιά πίνακα. Αλλά σε γενικές γραμμές, εάν υποστηρίζονται πλέγμα και flexbox, τότε μπορείτε να υποθέσετε ότι justify-itemsισχύει επίσης.
Διάταξη πλέγματος
| ΙΕ | Ακρη | Firefox | Χρώμιο | Σαφάρι | ΛΥΡΙΚΗ ΣΚΗΝΗ |
|---|---|---|---|---|---|
| Οχι | 16+ | 45+ | 57+ | 10.1+ | 44+ |
| Android Chrome | Android Firefox | Πρόγραμμα περιήγησης Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 81+ | 45+ | 81+ | 10.1+ | 59+ |
Ευέλικτη διάταξη
| ΙΕ | Ακρη | Firefox | Χρώμιο | Σαφάρι | ΛΥΡΙΚΗ ΣΚΗΝΗ |
|---|---|---|---|---|---|
| Οχι | 12+ | 20+ | 52+ | 9+ | 12.1+ |
| Android Chrome | Android Firefox | Πρόγραμμα περιήγησης Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 87+ | 83+ | 81+ | 9+ | 12.1+ |
Σχετικές ιδιότητες
Almanac στις 27 Οκτωβρίου 2019Στοίχιση-αντικείμενα
Geoff Graham