Proprietà CSS justify-self

Definizione e uso

L'attributo justify-self allinea gli elementi di griglia all'interno della cella di griglia lungo la direzione delle righe.

Per le pagine in inglese, la direzione delle righe è da sinistra a destra e la direzione del blocco è verso il basso.

Per far sì che questo attributo abbia un qualsiasi effetto di allineamento, l'elemento di griglia deve lasciare spazio disponibile intorno a sé nella direzione delle righe.

Suggerimento:Per allineare gli elementi di griglia nella direzione del blocco invece che nella direzione delle righe, utilizzare Attributo align-self O Attributo align-items Attributi.

Vedi anche:

Guida CSS:CSS Grid

Guida CSS:Posizionamento CSS

Manuale CSS:Attributo align-content

Manuale CSS:Attributo align-items

Manuale CSS:Attributo align-self

Manuale CSS:Attributo direction

Manuale CSS:Attributo grid

Manuale CSS:Attributo grid-template-columns

Manuale CSS:Attributo position

Manuale CSS:Attributo writing-mode

Vedi anche:

Esempio

Esempio 1

Allineare l'elemento di griglia sulla destra della sua cella di griglia:

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

Prova personalmente

Esempio 2: justify-self versus justify-items

Impostare il modo di allineamento rispetto al contenitore su 'centrato' e l'elemento di griglia stesso su 'allineamento a destra'. Il valore dell'attributo 'right' prevale:

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

Prova personalmente

Esempio 3: Impostare justify-self su un elemento di posizionamento assoluto

Impostare il modo di allineamento dell'elemento di posizionamento assoluto in 'right':

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

Prova personalmente

Esempio 4: writing-mode

Quando il valore dell'attributo writing-mode dell'elemento contenitore di griglia è impostato su vertical-rl, la direzione delle righe è verso il basso. Di conseguenza, il punto di partenza del contenitore si sposta dalla sinistra verso l'alto e la fine del contenitore si sposta dalla destra verso il basso:

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

Prova personalmente

Esempio 5: direction

Quando l'attributo direction dell'elemento contenitore di griglia è impostato su 'rtl', la direzione in linea è da destra a sinistra. Di conseguenza, il punto di partenza del contenitore si sposta dalla sinistra destra e la fine del contenitore si sposta dalla destra sinistra:

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

Prova personalmente

Sintassi CSS

justify-self: auto|normal|stretch|allineamento posizionale|allineamento-overflow|allineamento di base|initial|inherit;

Valore dell'attributo

Valore Descrizione
auto Valore predefinito. Eredita il valore dell'attributo justify-self del contenitore di griglia.
normal

Dipende dal contesto di layout, ma è simile al 'stretch' dell'elemento griglia nella layout a griglia quando non è impostato size.

Se è impostato size, il comportamento del valore dell'attributo è simile a 'start'.
stretch Se non è impostato inline-size (larghezza), si allunga per riempire la cella della griglia.
start Allinea il progetto all'inizio della direzione in linea.
left Allinea il progetto a sinistra.
center Allinea il progetto al centro.
end Allinea il progetto alla fine della direzione in linea.
right Allinea il progetto a destra.
allineamento-overflow
  • 'safe' imposta il modo di allineamento del progetto a 'start', se il contenuto si spinge oltre.
  • 'unsafe' mantiene il valore di allineamento, indipendentemente dal contenuto del progetto che si spinge oltre.
allineamento di base Allineamento con la linea di base dell'elemento.
initial Imposta questa proprietà al suo valore predefinito. Vedi: initial.
inherit Inherita questa proprietà dal suo elemento padre. Vedi: inherit.

Dettagli tecnici

Valore predefinito: auto
Ereditarietà: No
Creazione dell'animazione: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.justifySelf="right"

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente questa proprietà.

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