Ultimo allineamento base di riferimento

Tutti i principali motori browser ora supportano l'ultimo allineamento di base nella griglia CSS e in Flex.

Rachel Andrew

L'allineamento utilizzando le parole chiave first e last è ora disponibile in tutti i principali motori. Ciò significa che possiamo utilizzare l'ultimo allineamento di base come un'altra opzione quando allinei gruppi di elementi flessibili o griglia.

Primo allineamento di riferimento

Se imposti il valore di align-items su baseline, il risultato sarà il primo allineamento di riferimento. Di conseguenza, la prima base di riferimento dell'elemento che stai allineando (descritta come oggetto dell'allineamento) si allineerà con la prima base di riferimento degli altri elementi del gruppo. Puoi vedere questo aspetto nell'esempio seguente, in cui i primi due elementi flessibili sono allineati usando align-items: baseline, in modo che si allineino secondo la base di riferimento creata dal testo più grande. L'elemento finale è allineato a flex-start e quindi si allinea all'inizio del contenitore flessibile.

Ultimo allineamento di riferimento

Quando allinei un elemento a griglia o flessibile al valore last baseline, l'ultima base di riferimento dell'elemento verrà allineata all'ultima base di riferimento del gruppo di condivisione di riferimento di cui fa parte. L'esempio seguente mostra l'ultimo allineamento di base, con il primo elemento flessibile allineato all'ultima riga di testo dell'elemento più grande. L'elemento finale di questo gruppo è allineato a flex-end, che è la fine del contenitore flessibile.

Allineamento di riserva

Se l'oggetto dell'allineamento non ha un gruppo di condivisione di riferimento a cui allinearsi, verrà utilizzato un allineamento di riserva. Per baseline e first baseline l'allineamento di riserva è start, mentre per last baseline l'allineamento di riserva è end.