CSS place-self ιδιότητα

Ορισμός και χρήση

place-self Η ιδιότητα χρησιμοποιείται για την προσαρμογή της θέσης της μοναδικής κελίς και είναι συντομευμένη έκδοση των παρακάτω ιδιοτήτων:

Αν η ιδιότητα place-self έχει δύο τιμές:

place-self: start center;
  • Η τιμή της ιδιότητας align-self είναι 'start'
  • Η τιμή της ιδιότητας justify-self είναι 'center'

Αν η ιδιότητα place-self έχει μόνο μια τιμή:

place-self: end;
  • Τότε οι τιμές των ιδιοτήτων align-self και justify-self είναι 'end'

Παράδειγμα

Παράδειγμα 1

Συνδυάζει την αντικειμενική θέση της μοναδικής κελίς στο δίκτυο και στην κατεύθυνση της γραμμής προς το τέλος:

#myDiv {
  place-self: end;
}

Προσπαθήστε το μόνοι σας

Παράδειγμα 2: Κατεύθυνση γραφής

Όταν ο διαδραστικός κώδικας <div> είναι writing-mode Ο δείκτης τιμής ορίζεται ως 'vertical-rl' όταν η κελί του δίκτυου μετακινείται από το κάτω μέρος προς τον αριστερό πλούτο στην κατεύθυνση του μπλοκ και από τον δεξιό πλούτο προς το κάτω μέρος στην κατεύθυνση της γραμμής:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

Προσπαθήστε το μόνοι σας

Παράδειγμα 3: Διάταξη των ελαστικών τοιχείων

place-self Η ιδιότητα μπορεί επίσης να χρησιμοποιηθεί για τα στοιχεία της διάταξης των ελαστικών τοιχείων, αλλά justify-self Η δεύτερη τιμή θα αγνοηθεί, επειδή δεν εφαρμόζεται στη διάταξη των ελαστικών τοιχείων:

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

Προσπαθήστε το μόνοι σας

Γλώσσα CSS

place-self: auto|value|initial|inherit;

Τιμή ιδιότητας

Τιμή Περιγραφή
auto Προεπιλεγμένο. Η προεπιλεγμένη τιμή της ιδιότητας place-self του στοιχείου.
normal

Εξαρτάται από το πλαίσιο της διάταξης, αλλά για τα στοιχεία που δεν έχουν οριστεί το μέγεθος, η συμπεριφορά τους μοιάζει με 'stretch' στη διάταξη δίκτυου.

Αν έχει οριστεί το μέγεθος, η συμπεριφορά της τιμής της ιδιότητας μοιάζει με 'start'.
stretch Αν δεν έχει οριστεί το μέγεθος, επεκτείνεται για να γεμίσει τη κύτταρο της δομής.
start Στοίχειοθετεί το στοιχείο στη θέση της έναρξης στην γραμμική και το μπλοκ κατεύθυνση.
left Στοίχειοθετεί το στοιχείο στη αριστερή πλευρά της γραμμικής κατεύθυνσης, ως τιμή της ιδιότητας justify-self.
center Στοίχειοθετεί το στοιχείο στο κέντρο.
end Στοίχειοθετεί το στοιχείο στη θέση της λήξης στην γραμμική και το μπλοκ κατεύθυνση.
right Στοίχειοθετεί το στοιχείο στη δεξιά πλευρά της γραμμικής κατεύθυνσης, ως τιμή της ιδιότητας justify-self.
overflow-alignment

'safe': Αν το περιεχόμενο υπερβαίνει, η στοίχειοθέτηση του στοιχείου ορίζεται σε 'start'.

'unsafe': Μέχρι όπου ο περιεχόμενος του στοιχείου υπερβαίνει, διατηρείται η τιμή της στοίχειοθέτησης.
Στοίχειοθέτηση βάσης γραμμής Το στοιχείο στοίχειοθετείται με την οριζόντια γραμμή βάσης του γονικού στοιχείου.
initial Θέστε αυτήν την ιδιότητα στη προεπιλεγμένη της τιμή. Δείτε: initial.
inherit Επιπλέον, από το γονικό στοιχείο του. Δείτε: inherit.

Τεχνικά λεπτομέρειες

Προεπιλεγμένος τιμή: auto
Εναπόληψη: Όχι
Προσθήκη αнимации: Μη υποστηριζόμενο. Δείτε:Ιδιότητες αнимации.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.placeSelf="end stretch"

Υποστήριξη περιηγητών

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

Χρωμίου Εντζ Φάιρφξεξ Σαφάρι Οπερά
59.0 79.0 45.0 11.0 46.0

Σελίδες συναφείς

Εκμάθηση:CSS 格子布局

Εκμάθηση:CSS 弹性盒布局

Αναφορά:Παράμετρος align-self CSS

Αναφορά:CSS justify-self ιδιότητα

Αναφορά:CSS writing-mode ιδιότητα