Giustificare-articoli - Trucchi CSS

La justify-itemsproprietà è una sotto-proprietà del CSS Box Alignment Module che controlla fondamentalmente l'allineamento degli elementi della griglia all'interno del loro ambito.

.element ( justify-items: center; )

justify-itemsallinea gli elementi della griglia lungo l'asse della riga (in linea). In particolare, questa proprietà consente di impostare l'allineamento per gli elementi all'interno di un contenitore della griglia (non la griglia stessa) in una posizione specifica (ad esempio start, centere end) o con un comportamento (ad esempio autoo stretch).

Quando justify-itemsviene utilizzato, imposta anche il justify-selfvalore predefinito per tutti gli elementi della griglia, sebbene questo possa essere sovrascritto a livello figlio utilizzando la justify-selfproprietà sul figlio stesso.

.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )

Sintassi

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )

• Valore iniziale: legacy
• Si applica a: tutti gli elementi
• Ereditato: no
• Valore calcolato: come specificato
• Tipo di animazione: discreta

Valori

/* 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;

Valori delle parole chiave di base

• stretch: Valore predefinito. Allinea gli elementi per riempire l'intera larghezza della cella dell'elemento della griglia
• auto: uguale al valore di justify-itemsin parent.
• normal: Mentre vediamo justify-itemsusato più spesso in un layout a griglia, tecnicamente è per qualsiasi allineamento di scatola e normalsignifica cose diverse in un contesto di layout diverso, tra cui:
  • layout a livello di blocco ( start)
  • layout di griglia stretch
  • flexbox (ignorato)
  • celle della tabella (ignorate)
  • layout assolutamente posizionati ( start)
  • scatole posizionate in modo assoluto ( stretch)
  • ha sostituito le caselle posizionate in modo assoluto ( start)

.container ( justify-items: stretch; )

Valori di allineamento della linea di base

Ciò allinea la linea di base di allineamento del primo o dell'ultimo gruppo di linee di base del riquadro con la linea di base corrispondente del suo contesto di allineamento.

.container ( justify-items: baseline; )

• L'allineamento di fallback per first baselineis safe start.
• L'allineamento di fallback per last baselineis safe end.
• baselinecorrisponde a first baselinequando usato da solo

Nella demo di seguito (visualizzata al meglio in Firefox), vediamo come gli elementi si allineano con la linea di base di una griglia basata sull'asse principale.

Valori di allineamento posizionale

• start: Allinea gli elementi al bordo iniziale del contenitore di allineamento
• end: Allinea gli elementi con il contenitore dell'allineamento del bordo finale
• center: Allinea gli elementi al centro del contenitore di allineamento
• left: Allinea gli elementi a sinistra del contenitore di allineamento
• right: Allinea gli elementi a destra del contenitore di allineamento
• self-start: Allinea gli elementi all'inizio di ogni cella di elemento della griglia
• self-end: Allinea gli elementi alla fine di ogni cella di elemento della griglia

.container ( justify-items: )

.container ( justify-items: )

.container ( justify-items: center; )

Valori di allineamento di overflow

La proprietà overflow determina come verrà visualizzato il contenuto della griglia quando il contenuto supera i limiti del limite della griglia. Pertanto, quando i contenuti sono più grandi del contenitore di allineamento, si verificherà un overflow che potrebbe portare alla perdita di dati. Per evitare ciò, possiamo utilizzare il safevalore che indica al browser di modificare l'allineamento in modo che non si verifichi alcuna perdita di dati.

• safe : Se un elemento supera il contenitore di allineamento, startviene utilizzata la modalità.
• unsafe : Il valore di allineamento viene mantenuto così com'è, indipendentemente dalle dimensioni dell'articolo o dal contenitore di allineamento.

Valori legacy

• legacy : Quando utilizzato con una parola chiave direzionale (ad esempio right, lefto center), la parola chiave viene passata ai discendenti di ereditare. Ma se il discendente dichiara justify-self: auto;poi legacyviene ignorata, ma rispetta ancora la parola chiave direzionale. Il valore viene calcolato sul valore ereditato se non viene fornita alcuna parola chiave direzionale. Altrimenti, calcola normal.

Demo

Maggiori informazioni

• Modulo CSS Box Alignment Livello 3 (bozza di lavoro)
• Una guida completa alla griglia
• Una guida completa a Flexbox

Supporto del browser

Il supporto del browser justify-itemsesegue la gamma poiché viene utilizzato in più contesti di layout, come griglia, flexbox, celle di tabella. Ma in generale, se sono supportati grid e flexbox, allora puoi presumere che lo justify-itemssia anche.

Layout della griglia

IE	Bordo	Firefox	Cromo	Safari	musica lirica
No	16+	45+	57+	10.1+	44+

Android Chrome	Android Firefox	Browser Android	iOS Safari	Opera Mobile
81+	45+	81+	10.1+	59+

Layout flessibile

IE	Bordo	Firefox	Cromo	Safari	musica lirica
No	12+	20+	52+	9+	12.1+

Android Chrome	Android Firefox	Browser Android	iOS Safari	Opera Mobile
87+	83+	81+	9+	12.1+

Proprietà correlate

Almanac il 27 ottobre 2019

oggetti di allineamento

Geoff Graham