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

Rachel Andrew

In Chrome 123 puoi utilizzare la proprietà align-content di Allineamento caselle CSS nei layout a blocchi e di tabella. In questo modo l'allineamento della direzione dei blocchi senza bisogno di creare un layout flessibile o a griglia. Tuttavia, potresti dover aggiornare il tuo CSS se hai utilizzato align-content al di fuori di questi metodi di layout, dal momento che verranno applicati.

align-content in 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 space-between e distribuisce lo spazio disponibile nel container flessibile tra le righe flessibili.

Centra un elemento verticalmente

Dove align-content è particolarmente utile è centrare un elemento verticalmente all'interno di un contenitore. A questo scopo, utilizza display: flex insieme a align-content: center. In questo modo l'elemento diventa un elemento flessibile e vengono applicati anche altri comportamenti predefiniti per gli elementi flessibili. Nel seguente esempio l'intestazione è centrata verticalmente con align-content: center e questo fa sì che l'elemento si restringa per adattarsi ai contenuti, perciò 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 affinché la proprietà funzioni. Non sono necessarie proprietà aggiuntive perché l'elemento rimane un elemento di blocco, l'unica modifica è l'allineamento.

Testa il supporto di align-content nei layout a 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 gruppo di lavoro CSS sta esplorando una soluzione per implementazioni parziali come questa.

Controlla l'allineamento imprevisto dei siti

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