Come allineare le cose in CSS

Oggi abbiamo un'intera selezione di modi per allineare le cose nei CSS e non è sempre una decisione ovvia quale usare. Tuttavia, sapere cosa è disponibile significa che puoi sempre provare alcune tattiche se incontri un particolare problema di allineamento.

In questo articolo, darò un'occhiata ai diversi metodi di allineamento. Invece di fornire una guida completa a ciascuno, spiegherò alcuni dei punti critici che le persone hanno e indicherò riferimenti più completi per le proprietà e i valori. Come con gran parte dei CSS, puoi fare molto per capire le cose fondamentali su come si comportano i metodi, e quindi hai bisogno di un posto dove andare a cercare i dettagli più fini in termini di come ottenere il layout preciso che desideri.

Allineamento di testo ed elementi in linea

Quando abbiamo del testo e altri elementi inline su una pagina, ogni riga di contenuto viene trattata come una casella di riga. La proprietà text-align allineerà quel contenuto sulla pagina, ad esempio, se vuoi che il tuo testo sia centrato o giustificato. A volte, tuttavia, potresti voler allineare le cose all'interno di quella casella di linea rispetto ad altre cose, ad esempio se hai un'icona visualizzata accanto al testo o testo di dimensioni diverse.

Nell'esempio seguente, ho del testo con un'immagine in linea più grande. Sto usando vertical-align: middle sull'immagine per allineare il testo al centro dell'immagine.

La proprietà e l'allineamento line-height

Ricorda che la proprietà line-height cambierà la dimensione del line-box e quindi può cambiare il tuo allineamento. L'esempio seguente utilizza un valore di altezza linea grande di 150px e ho allineato l'immagine in top . L'immagine è allineata alla parte superiore della casella della riga e non alla parte superiore del testo, rimuovere l'altezza della riga o renderla inferiore alla dimensione dell'immagine e l'immagine e il testo si allineeranno nella parte superiore del testo.

Si scopre che line-height e in effetti la dimensione del testo è piuttosto complicata, e non ho intenzione di scendere in quella tana del coniglio in questo articolo. Se stai cercando di allineare con precisione gli elementi inline e vuoi davvero capire cosa sta succedendo, ti consiglio di leggere "Deep Dive CSS: Font Metrics, line-height And vertical-align ".

Quando posso usare la proprietà vertical-align ?

La proprietà vertical-align è utile se stai allineando qualsiasi elemento inline. Ciò include elementi con display: inline-block . Il contenuto delle celle della tabella può anche essere allineato con la proprietà vertical-align .

La proprietà vertical-align non ha effetto sugli elementi flex o grid e, pertanto, se utilizzata come parte di una strategia di fallback, cesserà di applicarsi nel momento in cui l'elemento padre viene trasformato in una griglia o flex Container. Ad esempio, nella penna successiva, ho una serie di elementi disposti con display: inline-block e questo significa che ho la possibilità di allineare gli elementi anche se il browser non ha Flexbox:

In questa penna successiva, ho trattato il inline-block come un ripiego per il layout Flex. Le proprietà di allineamento non si applicano più e posso aggiungere align-items di allineamento per allineare gli elementi in Flexbox. Puoi dire che il metodo Flexbox è in gioco perché il divario tra gli elementi che otterrai quando usi display: inline-block è sparito.

Il fatto che vertical-align sulle celle della tabella è il motivo per cui il trucco per centrare verticalmente un elemento utilizzando display: table-cell funziona.

Ora che abbiamo modi migliori per allineare le caselle in CSS (come vedremo nella prossima sezione), non abbiamo bisogno di utilizzare le proprietà vertical-align e text-align in luoghi diversi dagli elementi inline e text per cui sono stati progettati. Tuttavia, sono ancora completamente validi da utilizzare in quei formati di testo e inline, quindi ricorda che se stai cercando di allineare qualcosa inline, sono queste proprietà e non quelle di Box Alignment che devi raggiungere.

Allineamento scatola

La specifica di allineamento della scatola si occupa di come allineiamo tutto il resto. La specifica descrive in dettaglio le seguenti proprietà di allineamento:

• justify-content
• align-content
• justify-self
• align-self
• justify-items
• align-items

Potresti già pensare a queste proprietà come parte della specifica Flexbox, o forse della griglia. La storia delle proprietà è che sono nate come parte di Flexbox ed esistono ancora nella specifica di livello 1; tuttavia, sono stati spostati nelle loro specifiche quando è diventato evidente che erano più generalmente utili. Ora li usiamo anche in Grid Layout e sono specificati anche per altri metodi di layout, sebbene il supporto del browser attuale significhi che non sarai ancora in grado di usarli.

Pertanto, la prossima volta che qualcuno su Internet ti dice che l'allineamento verticale è la parte più difficile dei CSS, puoi dirgli questo (che si adatta anche a un tweet):

 .container { display: flex; align-items: center; justify-content: center; }

In futuro, potremmo anche essere in grado di fare a meno di display: flex , una volta implementate le proprietà Box Alignment per Block Layout. Al momento, tuttavia, fare il genitore della cosa che vuoi centrare un contenitore flessibile è il modo per ottenere l'allineamento orizzontalmente e verticalmente.

I due tipi di allineamento

Quando si allineano elementi flessibili e griglia, è possibile allineare due cose:

1. Hai lo spazio libero nella griglia o nel contenitore flessibile (una volta che gli oggetti o le tracce sono stati disposti).
2. Hai anche l'oggetto stesso all'interno dell'area della griglia in cui lo hai posizionato o sull'asse trasversale all'interno del contenitore flessibile.

Ti ho mostrato una serie di proprietà sopra e le proprietà di allineamento possono essere considerate come due gruppi. Quelli che si occupano della distribuzione dello spazio libero e quelli che allineano l'oggetto stesso.

Gestire lo spazio libero: align-content e justify-content

Le proprietà che terminano in -content riguardano la distribuzione dello spazio, quindi quando scegli di utilizzare align-content o justify-content stai distribuendo lo spazio disponibile tra le tracce della griglia o gli elementi flessibili. Non cambiano le dimensioni degli elementi flessibili o della griglia stessi; li spostano perché cambiano dove va lo spazio libero.

Di seguito, ho un esempio flessibile e un esempio di griglia. Entrambi hanno un contenitore più grande del necessario per visualizzare gli elementi flessibili o le tracce della griglia, quindi posso usare align-content e justify-content per distribuire quello spazio.

Spostare oggetti in giro: justify-self , align-self , justify-items e align-items

Abbiamo quindi align-self e justify-self applicati a singoli elementi flessibili o griglia; puoi anche usare align-items e justify-items sul contenitore per impostare tutte le proprietà contemporaneamente. Queste proprietà riguardano la flessione o l'elemento della griglia reale, ovvero lo spostamento del contenuto all'interno dell'area della griglia o della linea flessibile.

• Layout della griglia
  Ottieni entrambe le proprietà poiché puoi spostare l'elemento sul blocco e sull'asse in linea poiché abbiamo un'area della griglia definita in cui si trova.
• Disposizione flessibile
  È possibile eseguire l'allineamento solo sull'asse trasversale poiché l'asse principale è controllato dalla sola distribuzione dello spazio. Quindi, se i tuoi oggetti sono una riga, puoi usare align-self per spostarli su e giù all'interno della linea flessibile, allineandoli l'uno contro l'altro.

Nel mio esempio qui sotto, ho un contenitore flex e una griglia e sto usando align-items e align-self in Flexbox per spostare gli elementi su e giù l'uno contro l'altro sull'asse trasversale. Se usi Firefox e ispezioni l'elemento utilizzando Firefox Flexbox Inspector, puoi vedere le dimensioni del contenitore flessibile e come gli elementi vengono spostati verticalmente all'interno di esso.

Nella griglia, posso usare tutte e quattro le proprietà per spostare gli elementi all'interno della loro area della griglia. Ancora una volta, Firefox DevTools Grid Inspector sarà utile quando si gioca con l'allineamento. Con le linee della griglia sovrapposte, puoi vedere l'area all'interno della quale viene spostato il contenuto:

Gioca con i valori nella demo CodePen per vedere come puoi spostare il contenuto in ogni metodo di layout:

Confuso da align e justify

Uno dei problemi citati con le persone che ricordano le proprietà di allineamento in Grid e Flexbox, è che nessuno può ricordare se allineare o giustificare. Quale direzione è quale?

Per il layout della griglia, devi sapere se ti stai allineando nel blocco o nella direzione in linea. La direzione del blocco è la direzione dei blocchi disposti sulla tua pagina (nella tua modalità di scrittura), cioè per l'inglese che è verticale. La direzione Inline è la direzione in cui scorrono le frasi (quindi per l'inglese che va da sinistra a destra orizzontalmente).

Per allineare le cose nella direzione del blocco, utilizzerai le proprietà che iniziano con align- . Puoi utilizzare align-content per distribuire lo spazio tra le tracce della griglia, se c'è spazio libero nel contenitore della griglia, e align-items o align-self per spostare un elemento all'interno dell'area della griglia in cui è stato posizionato.

L'esempio seguente ha due layout di griglia. Uno ha writing-mode: horizontal-tb (che è l'impostazione predefinita per l'inglese) e l'altro la writing-mode: vertical-rl . Questa è l'unica differenza tra loro. Puoi vedere che le proprietà di allineamento che ho applicato funzionano esattamente allo stesso modo sull'asse del blocco in entrambe le modalità.

Per allineare le cose nella direzione inline, usa le proprietà che iniziano con justify- . Usa justify-content per distribuire lo spazio tra le tracce della griglia e justify-items giustifica o justify-self per allineare gli elementi all'interno della loro area della griglia nella direzione in linea.

Ancora una volta, ho due esempi di layout della griglia in modo da poter vedere che inline è sempre inline, indipendentemente dalla modalità di scrittura che stai utilizzando.

Flexbox è un po' più complicato a causa del fatto che abbiamo un asse principale che può essere cambiato in row o column . Quindi, pensiamo prima a quell'asse principale. Viene impostato con la proprietà flex-direction . Il valore iniziale (o predefinito) di questa proprietà è la row che disporrà gli elementi flessibili come una riga nella modalità di scrittura attualmente in uso: ecco perché quando si lavora in inglese, si finisce con gli elementi disposti orizzontalmente quando si crea un contenitore flessibile. È quindi possibile modificare l'asse principale in flex-direction: column e gli elementi verranno disposti come una colonna, il che significa che sono disposti nella direzione del blocco per quella modalità di scrittura.

Poiché possiamo fare questo cambio di asse, il fattore più importante in Flexbox è chiedere: "Qual è il mio asse principale?" Una volta che lo sai, per l'allineamento (quando sei sul tuo asse principale) usi semplicemente justify-content . Non importa se il tuo asse principale è riga o colonna. Puoi controllare lo spazio tra gli elementi flessibili con justify-content .

Sull'asse trasversale, puoi utilizzare align-items che allineerà gli elementi all'interno del contenitore flessibile o la linea flessibile in un contenitore flessibile a più righe. Se si dispone di un contenitore a più righe che utilizza flex-wrap: wrap e disporre di spazio in quel contenitore, è possibile utilizzare align-content per distribuire lo spazio sull'asse trasversale.

Nell'esempio seguente, stiamo facendo entrambe le cose con un contenitore flessibile visualizzato come riga e colonna:

Quando justify-content o align-content non funziona

Le proprietà justify-content e align-content in Grid e Flexbox riguardano la distribuzione di spazio aggiuntivo . Quindi la cosa da controllare è che hai spazio extra.

Ecco un esempio Flex: ho impostato flex-direction: row e ho tre elementi. Non occupano tutto lo spazio nel contenitore flessibile, quindi ho spazio libero sull'asse principale, il valore iniziale per justify-content è flex-start e quindi i miei articoli sono tutti allineati all'inizio e lo spazio extra è alla fine. Sto usando Firefox Flex Inspector per evidenziare lo spazio.

Se cambio flex-direction in space-between , quello spazio extra è ora distribuito tra gli elementi:

Se ora aggiungo più contenuti ai miei articoli in modo che diventino più grandi e non ci sia più spazio aggiuntivo, justify-content non fa nulla, semplicemente perché non c'è spazio da distribuire.

Una domanda comune che mi viene posta è perché justify-content non funziona quando flex-direction è column . Questo è generalmente perché non c'è spazio da distribuire. Se prendi l'esempio sopra e lo rendi flex-direction: column , gli elementi verranno visualizzati come una colonna, ma non ci sarà spazio aggiuntivo sotto gli elementi come quando flex-direction: row . Questo perché quando crei un contenitore flessibile con display: flex hai un contenitore flessibile a livello di blocco; questo occuperà tutto lo spazio possibile nella direzione inline. In CSS, le cose non si estendono nella direzione del blocco, quindi nessuno spazio extra.

Aggiungi un'altezza al contenitore e, purché sia ​​superiore a quella necessaria per visualizzare gli elementi, hai spazio aggiuntivo e quindi justify-content funzionerà sulla tua colonna.

Perché non c'è justify-self in Flexbox?

Grid Layout implementa tutte le proprietà per entrambi gli assi perché abbiamo sempre due assi da gestire in Grid Layout. Creiamo tracce (che possono lasciare spazio aggiuntivo nel contenitore della griglia in entrambe le dimensioni) e quindi possiamo distribuire quello spazio con align-content o justify-content . Abbiamo anche le aree della griglia e l'elemento in quell'area potrebbe non occupare l'intero spazio dell'area, quindi possiamo usare align-self o justify-self per spostare il contenuto nell'area (o align-items , justify-items per modificare l'allineamento di tutti gli elementi).

Flexbox non ha tracce nel modo in cui le ha il layout Grid. Sull'asse principale, tutto ciò con cui dobbiamo giocare è la distribuzione dello spazio tra gli oggetti. Non esiste il concetto di un binario in cui è posizionato un elemento flessibile. Quindi non viene creata un'area in cui spostare l'oggetto. Questo è il motivo per cui non c'è la proprietà justify-self sugli assi principali in Flexbox.

A volte, tuttavia, vuoi essere in grado di allineare un elemento o una parte del gruppo di elementi in un modo diverso. Un modello comune sarebbe una barra di navigazione divisa con un elemento separato dal gruppo. In tale situazione, la specifica consiglia l'uso di margini automatici.

Un margine automatico occuperà tutto lo spazio nella direzione in cui viene applicato, motivo per cui possiamo centrare un blocco (come il layout della nostra pagina principale) utilizzando un margine sinistro e destro di auto. Con un margine automatico su entrambi i lati, ogni margine cerca di occupare tutto lo spazio e quindi spinge il blocco nel mezzo. Con la nostra riga di elementi flessibili, possiamo aggiungere margin-left: auto all'elemento su cui vogliamo che avvenga la divisione e finché c'è spazio disponibile nel contenitore flessibile, otterrai una divisione. Funziona bene con Flexbox perché non appena non c'è spazio disponibile, gli articoli si comportano come fanno i normali articoli flessibili.

Flexbox e microcomponenti

Una delle cose che penso venga spesso trascurata è quanto sia utile Flexbox per eseguire piccoli lavori di layout, dove potresti pensare che l'utilizzo dell'allineamento vertical-align sia la strada da percorrere. Uso spesso Flexbox per ottenere un allineamento ordinato di piccoli motivi; ad esempio, allineare un'icona accanto al testo, allineare due elementi con caratteri di dimensioni diverse o allineare correttamente i campi modulo e i pulsanti. Se stai lottando per allineare bene qualcosa con vertical-align , allora forse prova a fare il lavoro con Flexbox. Ricorda che puoi anche creare un contenitore inline flex se vuoi con display: inline-flex .

Non c'è motivo per non utilizzare Flexbox, o anche Grid per piccoli lavori di layout. Non sono solo per grandi porzioni di layout. Prova le diverse cose a tua disposizione e vedi cosa funziona meglio.

Le persone spesso sono molto desiderose di sapere qual è il modo giusto o sbagliato di fare le cose. In realtà, spesso non c'è giusto o sbagliato; una piccola differenza nel tuo modello potrebbe significare la differenza tra Flexbox che funziona meglio, dove altrimenti useresti vertical-align .

Avvolgendo

Per concludere, ho un breve riassunto delle basi dell'allineamento. Se ricordi queste poche regole, dovresti essere in grado di allineare la maggior parte delle cose con i CSS:

1. Stai allineando il testo o un elemento inline? In tal caso, è necessario utilizzare text-align , vertical-align e line-height .
2. Hai uno o più elementi che desideri allineare al centro della pagina o del contenitore? In tal caso, rendi il contenitore un contenitore flessibile, quindi imposta align-items: center e justify-content: center .
3. Per i layout griglia, le proprietà che iniziano con align- funzionano nella direzione del blocco; quelli che iniziano con justify- lavorano nella direzione inline.
4. Per i layout flessibili, le proprietà che iniziano con align- funzionano sull'asse trasversale; quelli che iniziano con justify- lavorano sull'asse principale.
5. Le proprietà justify-content e align-content distribuiscono spazio aggiuntivo. Se non hai spazio extra nel tuo contenitore flessibile o griglia, non faranno nulla.
6. Se pensi di aver bisogno di justify-self in Flexbox, l'uso di un margine automatico probabilmente ti darà lo schema che stai cercando.
7. Puoi utilizzare Grid e Flexbox insieme alle proprietà di allineamento per piccoli lavori di layout e componenti principali: sperimenta!

Per ulteriori informazioni sull'allineamento, vedere queste risorse:

• Allineamento casella CSS (documenti Web MDN)
• Tutto quello che devi sapere sull'allineamento in Flexbox
• Cheatsheet per l'allineamento delle scatole