Proprietà CSS justify-items

Definizione e uso

L'attributo justify-items viene impostato sul contenitore di griglia per allineare i figli (elementi di griglia) nella direzione in linea.

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

Per far sì che questo attributo abbia qualsiasi effetto di allineamento, l'elemento di griglia deve avere spazio disponibile intorno a sé nella direzione in linea.

Suggerimento:Per allineare gli elementi di griglia nella direzione del blocco invece che in direzione in linea, utilizzare Attributo align-items Attributi.

Vedi anche:

Tutorial CSS:CSS Grid

Tutorial CSS:Posizionamento CSS

Manuale CSS:Attributo align-items

Manuale CSS:Attributo direction

Manuale CSS:Attributo grid

Manuale CSS:Attributo grid-template-columns

Manuale CSS:Attributo justify-self

Manuale CSS:Attributo position

Manuale CSS:Attributo writing-mode

Esempio

Esempio 1

Allineare ogni elemento di griglia alla fine della sua cella in direzione in linea:

#container {
  display: grid;
  justify-items: end;
}

Prova tu stesso

Esempio 2: justify-items vs justify-self

Impostare il metodo di allineamento rispetto al contenitore come "centrato", e il contenitore stesso come "destra giusta". Il valore dell'attributo 'right' prevale:

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

Prova tu stesso

Esempio 3: Impostare justify-items su un elemento di griglia assoluto

Impostare il metodo di allineamento del contenitore assoluto della griglia come "destra giusta":

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

Prova tu stesso

Esempio 4: writing-mode

Quando il valore dell'attributo writing-mode dell'elemento contenitore di griglia è impostato su vertical-rl, la direzione in linea è verso il basso. Di conseguenza, il punto di partenza del contenitore si sposta da sinistra a sopra, e la fine del contenitore si sposta da destra a sotto:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

Prova tu stesso

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 da sinistra a destra e il punto finale del contenitore si sposta da destra a sinistra:

#container {
  justify-items: start;
  direction: rtl;
}

Prova tu stesso

Sintassi CSS

justify-items: legacy|normal|stretch|Allineamento posizionale|overflow-alignment|Allineamento di base|initial|inherit;

Valore dell'attributo

Valore Descrizione
legacy

Valore predefinito.

Solo quando il valore di justify-self è 'auto' e inizia con 'legacy', l'elemento griglia eredita il valore dell'attributo justify-items del contenitore di griglia.

Esiste per implementare il comportamento di allineamento legacy dell'elemento <center> di HTML e dell'attributo align.
normal Dipende dal contesto di layout, ma è simile a 'stretch' della layout a griglia.
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.
overflow-alignment
  • '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.
baseline-alignment Allineamento dell'elemento con la linea di base del suo elemento padre.
initial Imposta questo attributo al suo valore predefinito. Vedi: initial.
inherit Inherita da questo attributo dal suo elemento padre. Vedi: inherit.

Dettagli tecnici

Valore predefinito: legacy
Ereditarietà: No
Creazione animazione: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.justifyItems="center"

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