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

Rachel Andrew

A partire da Chrome 123 puoi utilizzare la proprietà align-content di CSS Box Alignment nei layout a blocchi e a tabelle. In questo modo, l'allineamento della direzione del blocco è consentito 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 avrà effetto.

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.

Centrare un elemento verticalmente

align-content è particolarmente utile per centrare verticalmente un elemento all'interno di un contenitore. Per farlo, utilizza display: flex insieme a align-content: center. In questo modo, l'elemento diventa un elemento flessibile e vengono applicati anche altri comportamenti predefiniti degli elementi flessibili. Nell'esempio seguente, l'intestazione è centrata 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.

Con align-content disponibile per il layout a blocchi, potrai ottenere l'allineamento verticale senza dover creare un layout flessibile per la proprietà funzionare. Non sono necessarie proprietà aggiuntive, poiché l'elemento rimane un elemento di blocco. L'unica modifica riguarda l'allineamento.

Testare il supporto di align-content nei layout dei blocchi

Purtroppo, non è possibile testare il supporto di align-content nel layout a blocchi. Poiché align-content è supportato da molto tempo nel layout flessibile e a griglia, l'utilizzo di query sulle funzionalità con @supports restituirà sempre true. Questa è la stessa situazione che si è verificata con la proprietà gap in flexbox. Il CSS Working Group sta esplorando una soluzione per implementazioni parziali come questa.

Controlla i tuoi siti per verificare la presenza di allineamenti imprevisti

La proprietà align-content è stata definita per molti anni nella specifica come funzionante sui layout dei blocchi. Poiché nessun browser supportava align-content al di fuori di questi contesti, non è stato eseguito alcun rendering. Tuttavia, se hai aggiunto la proprietà a qualcosa che non è un contenitore flessibile o a griglia, inizierà ad avere effetto a partire da Chrome 123. Cerca nel CSS l'utilizzo di align-content e utilizza la versione beta per testare i tuoi siti e le tue applicazioni se questo potrebbe essere il tuo caso.