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

Definition and Usage

The justify-self attribute aligns grid items along the inline direction within its grid cell.

For English pages, the inline direction is from left to right, and the block direction is downward.

For this attribute to have any alignment effect, the grid item must leave available space around itself in the inline direction.

Tip:To align grid items in the block direction instead of the inline direction, use align-self attribute Or align-items attribute Properties.

See also:

CSS Tutorial:CSS Grid

CSS Tutorial:CSS Positioning

CSS Reference Manual:align-content attribute

CSS Reference Manual:align-items attribute

CSS Reference Manual:align-self attribute

CSS Reference Manual:direction attribute

CSS Reference Manual:grid attribute

CSS Reference Manual:grid-template-columns attribute

CSS Reference Manual:position attribute

CSS Reference Manual:writing-mode attribute

See also:

Instance

Example 1

Align the grid item to the right of its grid cell:

.red {
  display: grid;
  justify-self: right;
}

Δοκιμάστε το προσωπικά

Example 2: Comparison of justify-self and justify-items

Set the alignment relative to the container to 'center', and set the grid item itself to 'right-align'. The 'right' value prevails:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Δοκιμάστε το προσωπικά

Example 3: Setting justify-self on an absolutely positioned grid item

Set the alignment of the absolutely positioned grid item to 'right':

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

Δοκιμάστε το προσωπικά

Example 4: writing-mode

When the writing-mode attribute value of the grid container element is set to vertical-rl, the inline direction is downward. The result is that the starting point of the container moves from the left to the top, and the end point of the container moves from the right to the bottom:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Δοκιμάστε το προσωπικά

Παράδειγμα 5: direction

Όταν η τιμή της ιδιότητας direction του στοιχείου κουτί διαμόρφωσης είναι 'rtl', η κατευθυνόμενη γραμμή είναι από δεξιά προς αριστερά. Το αποτέλεσμα είναι ότι η αρχή του κουτί διαμόρφωσης μετακινείται από την αριστερή πλευρά στην δεξιά και το τέλος του κουτί διαμόρφωσης μετακινείται από την δεξιά πλευρά στην αριστερή πλευρά:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Δοκιμάστε το προσωπικά

Γλώσσα CSS

justify-self: auto|normal|stretch|τοποθεσιακή σύμμορφωση|σύμμορφωση υπερπληρώσεως|Συμμόρφωση γραμμής βάσης|initial|inherit;

Τιμή χαρακτηριστικού

Τιμή Περιγραφή
auto Προεπιλεγμένη τιμή. Κληρονομεί την τιμή της ιδιότητας justify-self του κουτί διαμόρφωσης δίκτυου.
κανονική

Απόależy από το πλαίσιο διαμόρφωσης, αλλά είναι παρόμοια με την 'έκταση' του στοιχείου του δίκτυου όταν δεν έχει ρυθμιστεί το size.

Αν έχει ρυθμιστεί το size, η συμπεριφορά της τιμής του χαρακτηριστικού είναι παρόμοια με 'start'.
έκταση Αν δεν έχει ρυθμιστεί το inline-size (πλάτος), θα επεκταθεί για να γεμίσει τη κελί του δίκτυου.
αρχή Σύμμορφωση του αντικειμένου στο αρχή της κατευθυνόμενης γραμμής.
αριστερά Σύμμορφωση του αντικειμένου αριστερά.
κέντρο Σύμμορφωση του αντικειμένου στο κέντρο.
τέλος Σύμμορφωση του αντικειμένου στο τέλος της κατευθυνόμενης γραμμής.
δεξιά Σύμμορφωση δεξιάς πλευράς του αντικειμένου.
σύμμορφωση υπερπληρώσεως
  • 'safe' θα ρυθμίσει την σύμμορφωση του αντικειμένου σε 'start', αν το περιεχόμενο υπερβαίνει.
  • 'unsafe' διατηρεί την τιμή σύμμορφωσης, ανεξάρτητα αν το περιεχόμενο υπερβαίνει.
Συμμόρφωση γραμμής βάσης Το στοιχείο εφαρμόζει την οριζόντια γραμμή βάσης με το γονικό στοιχείο.
initial Θέσε αυτήν την ιδιότητα στην προεπιλεγμένη της τιμή. Προσέξε: initial.
inherit Κληρονομεί αυτήν την ιδιότητα από το γονικό στοιχείο. Προσέξε: inherit.

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

Προεπιλεγμένη τιμή: auto
Κληρονομικότητα: Όχι
Δημιουργία αニμα: Δεν υποστηρίζεται. Εξέτασε:Αξίες σχετικές με την αニμα.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.justifySelf="right"

Υποστήριξη προγράμματος περιήγησης

Ο αριθμός στην τάβλη αναφέρει την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτήν την ιδιότητα.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0