Luogo-oggetti - Trucchi CSS

La place-itemsproprietà in CSS è una scorciatoia per le proprietà align-itemse justify-items, combinandole in una singola dichiarazione.

Un utilizzo comune è il centraggio orizzontale e verticale con Grid:

.center-inside-of-me ( display: grid; place-items: center; )

Queste proprietà sono state utilizzate con l'introduzione dei layout Flexbox e Grid, ma si applicano anche a:

• Scatole a livello di blocco
• Scatole in posizione assoluta
• Posizione statica di scatole assolutamente posizionate
• Celle di tabella

Sintassi

La proprietà accetta valori doppi, il primo per align-itemse il secondo per justify-items. Come aggiornamento, align-itemsallinea il contenuto lungo l'asse verticale (colonna) mentre si justify-itemsallinea lungo l'asse orizzontale (riga).

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

È lo stesso che scrivere:

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

Se viene fornito un solo valore, vengono impostate entrambe le proprietà. Ad esempio, questo:

.item ( display: grid; place-items: start; )

... è lo stesso che scrivere questo:

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

Valori accettati

Ciò che rende interessante questa proprietà è che si comporta in modo diverso in base al contesto in cui viene utilizzata. Ad esempio, alcuni valori si applicano solo a Flexbox e non funzioneranno in un'impostazione Grid. Inoltre, alcuni valori si applicano alla align-itemsproprietà, mentre altri si applicano al justify-itemslato.

Inoltre, si può pensare che i valori stessi rientrino in una serie di tipi di allineamento: contestuale, distribuzione, posizionale (che diventa auto-posizionale se applicato direttamente a un elemento figlio nel layout) e linea di base.

Rachel Andrew ha un eccellente cheat sheet di allineamento box che aiuta a illustrare l'effetto dei valori.

Valore	genere	Descrizione
auto	Contestuale	Il valore si regola di conseguenza in base al contesto dell'elemento. Usa il justify-itemsvalore dell'elemento genitore dell'elemento. Se non esiste genitore o è applicato a un elemento che è posizionato con absolute, il valore diventa normal.
normal	Contestuale	Accetta il comportamento predefinito del contesto di layout in cui viene applicato. • Layout a livello di blocco: start • Posizionamento assoluto: startper elementi assoluti sostituiti e stretchper tutti gli altri • Layout tabella: il valore viene ignorato • Layout Flexbox: il valore viene ignorato • Layout griglia :, a stretchmeno che non vengano utilizzate proporzioni o dimensioni intrinseche dove si comporta piacestart
stretch	Distribuzione	Espande l'elemento su entrambi i bordi del contenitore verticalmente per align-itemse orizzontalmente per justify-items.
start	Posizionale	Tutti gli elementi sono allineati l'uno contro l'altro sul bordo iniziale (sinistro) del contenitore
end	Posizionale	Tutti gli elementi sono allineati l'uno contro l'altro sul bordo finale (destro) del contenitore
center	Posizionale	Gli elementi sono allineati uno accanto all'altro verso il centro del contenitore
left	Posizionale	Gli elementi sono allineati uno accanto all'altro verso il lato sinistro del contenitore. Se la proprietà non è parallela a un asse standard superiore, destro, inferiore e sinistro, si comporta come end.
right	Posizionale	Gli elementi sono allineati uno accanto all'altro verso il lato destro del contenitore. Se la proprietà non è parallela a un asse standard superiore, destro, inferiore e sinistro, si comporta come start.
flex-start	Posizionale	Un valore solo flexbox (che ricade start) in cui gli articoli vengono imballati verso il bordo iniziale del contenitore.
flex-end	Posizionale	Un valore solo flexbox (che ricade end) in cui gli articoli vengono imballati verso il bordo finale del contenitore.
self-start	Posizionamento automatico	Consente a un elemento in un layout di allinearsi sul bordo del contenitore in base al proprio lato iniziale. Fondamentalmente sovrascrive il valore impostato sul genitore.
self-end	Posizionamento automatico	Consente a un elemento in un layout di allinearsi sul bordo del contenitore in base al proprio lato finale invece di ereditare il valore di posizione del contenitore. Fondamentalmente sovrascrive il valore impostato sul genitore.
first baseline last baseline	Baseline	Allinea tutti gli elementi all'interno di un gruppo (cioè le celle all'interno di una riga) facendo corrispondere le loro linee di base di allineamento. Il valore predefinito è firstif baselineviene utilizzato da solo.

Supporto browser

Questa proprietà è inclusa nella specifica CSS Box Alignment Model Livello 3.

Il supporto del browser è diventato piuttosto ampio e in gran parte solo utilizzabile:

• Edge 79+ (transizione post Chromium)
• Firefox 45+
• Chrome 59+
• Safari 11+

Riferimenti

• CSS Box Alignment Model Livello 3 - La specifica ufficiale in cui la place-itemsproprietà è inizialmente definita.
• Mozilla Developer Network : la documentazione del team Mozilla.
• Cheat Sheet di allineamento del riquadro : lo schema di Rachel Andrew è una risorsa estremamente utile per comprendere i termini di allineamento e le loro definizioni.