A partire da Chrome 123, puoi utilizzare la proprietà align-content
di CSS Box Alignment
nei layout di blocchi e tabelle. In questo modo, potrai allineare la direzione dei blocchi senza dover creare un layout flessibile o a griglia. Tuttavia, potresti dover aggiornare il CSS se hai utilizzato align-content
al di fuori di questi metodi di layout, in quanto ora verrà applicato.
Browser Support
align-content
nei layout flessibili e a griglia
Probabilmente hai utilizzato align-content
per allineare gli elementi flessibili o le tracce della griglia. In un
layout flessibile, la proprietà align-content
viene utilizzata nel contenitore flessibile per allineare
gli elementi flessibili sull'asse trasversale. Nell'esempio seguente, ha un valore di
space-between
, quindi distribuisce lo spazio disponibile nel contenitore flessibile
tra le righe flessibili.
align-content
distanzia le righe di elementi flessibili, poiché il contenitore flessibile ha spazio libero nell'asse trasversale.Centrare un elemento verticalmente
align-content
è particolarmente utile per centrare un elemento verticalmente
in un contenitore. Per farlo, utilizza display: flex
insieme a
align-content: center
. L'elemento diventa un elemento flessibile e vengono applicati anche altri comportamenti predefiniti degli elementi flessibili. Nell'esempio seguente, il titolo è centrato verticalmente con align-content: center
, il che fa sì che l'elemento si riduca per adattarsi ai contenuti, pertanto devi applicare flex-grow: 1
all'elemento.
align-content
centra l'intestazione verticalmente all'interno di un contenitore flessibile.Con align-content
disponibile per il layout dei blocchi, potrai ottenere un allineamento verticale senza dover creare un layout flessibile per la proprietà. Non sono necessarie proprietà aggiuntive perché l'elemento rimane un elemento di blocco. L'unica modifica riguarda l'allineamento.
align-content
centra l'intestazione verticalmente all'interno di un contenitore di blocco (è necessario Chrome 123 o Safari 17.4 o versioni successive).Testare il supporto di align-content
nei layout dei blocchi
Purtroppo non è possibile verificare il supporto di align-content
nel layout bloccato. Poiché align-content
è supportato da molto tempo nei layout flex e grid, l'utilizzo di query sui componenti con align-content
restituirà sempre true.@supports
Si tratta della stessa situazione che si è verificata con la proprietà gap
in flexbox. Il gruppo di lavoro CSS sta esplorando una soluzione per implementazioni parziali come questa.
Verificare la presenza di un allineamento imprevisto nei siti
La proprietà align-content
è stata definita da molti anni nella
specifica come
lavorazione dei layout dei blocchi. Poiché nessun browser supportava align-content
al di fuori di questi contesti, non è stato fatto nulla. Tuttavia, se hai aggiunto la proprietà a qualcosa che non è un contenitore flex o a griglia, inizierà ad avere effetto a partire da Chrome 123. Se ritieni che questo possa essere il tuo caso, cerca l'utilizzo di align-content
nel tuo CSS e utilizza la versione beta per testare i tuoi siti e le tue applicazioni.