Supporto per l'allineamento dei contenuti nei layout a blocchi e tabelle

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

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 125.
  • Safari: 17.4.

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.

La proprietà 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.

La proprietà 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.

La proprietà 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.