Posizionare gli elementi sul Web

body { display: grid; grid-auto-rows: 30px; grid-gap: 2rem; } 

body { display: grid; grid-template-columns: repeat(6, 1fr); } header { grid-column: 2 / 4; } 

Possiamo anche dire a un elemento della griglia di distribuirsi su un certo numero di colonne o righe con span

.grid { display: grid; grid-template-columns: repeat(6, 1fr); } header { grid-column: span 3; } 

Autoallineamento

Nella sezione flexbox, discuteremo l’allineamento dei genitori con align-contentjustify-contentalign-items e justify-items (che si applicano anche alla griglia). Ora, possiamo applicare alcune proprietà simili agli elementi figli stessi con align-self e justify-self. Entrambi prendono valori stringa come centerstart e endAlign-self si allinea sull’asse del blocco, mentre justify-self si allinea sull’asse in linea. L’allineamento prende la quantità di spazio che il contenuto all’interno dell’elemento della griglia occupa e lo posiziona di conseguenza.

body { display: grid; height: 100vh; } footer { align-self: end; } 

Se vuoi semplificare ancora di più, puoi usare la proprietà abbreviata place-self, che imposta rispettivamente align-self e justify-self. È possibile utilizzare due valori per posizionare un elemento, o un valore che viene applicato ad entrambe le proprietà. Questo rende la centratura un gioco da ragazzi.

body { display: grid; height: 100vh; } main { place-self: center; } 

Il passato e il futuro della griglia

La griglia è forse una delle tecniche di layout più potenti a nostra disposizione in questo momento sul web ed è stata anche una delle più veloci adozioni di una specifica da parte dei principali browser. Se state ancora supportando IE, tuttavia, notate che potete ancora usare grid con un po’ di autoprefixing. Edge, d’altra parte, supporta pienamente la griglia senza bisogno di prefissi.

Guardando al futuro, probabilmente aggiorneremo questo post per includere una caratteristica chiamata subgrid, che ci permetterà di annidare facilmente le griglie!

Flexbox

Un buon modo per gestire elementi di dimensioni variabili è usare le nuove proprietà flexbox introdotte in CSS3.1. Questo ci dà molte più opzioni per controllare il layout e ha risolto alcuni dei problemi di lunga data nei CSS. Il supporto dei browser è buono, e con un polyfill o fallback per portare Internet Explorer a velocità, è pronto per l’uso in produzione.

Ho detto che non avremmo parlato di come funziona il CSS, ma flexbox è ancora nuovo e purtroppo la sintassi è molto confusa. Flexbox è uno strumento così potente e sostituisce così tante altre soluzioni approssimative, quindi vale la pena prendersi del tempo per capire come usarlo.

Partiamo. Ecco come impostare un elemento per usare flexbox.

<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 

.container { display: flex; flex-direction: row; } 

Impostare il contenitore su display: flex permette semplicemente al browser di sapere che intendiamo che i figli usino flexbox per il loro layout. Poi aggiungiamoflex-direction: row ai figli per allinearli orizzontalmente, e per default avranno la stessa larghezza a meno che non abbiano una larghezza impostata.

Flex-direction

Flex-direction ti permette di specificare se i tuoi elementi devono essere disposti in verticale o in orizzontale. Per default, il valore sarà row, che semplicemente dispone gli elementi orizzontalmente. Puoi anche usare column per passare all’orientamento medio.

.container { display: flex; flex-direction: row; } 

Tenete a mente che l’uso di column può influenzare l’aspetto delle altre proprietà flexbox sui vostri elementi, e per semplicità parleremo principalmente di elementi orizzontali perché questo è di gran lunga il caso d’uso più comune, ma tenete a mente che questa altra opzione di direzione esiste.

Flex-wrap

Flex-wrap definisce se gli elementi devono essere forzati a stare in una singola linea (no-wrap, il comportamento predefinito) o se devono mantenere la loro dimensione normale conwrap. La maggior parte delle volte vorrete il comportamento di default, ma sovrascrivere questa proprietà vi permetterà di usare le altre proprietà di flexbox senza influenzare le larghezze.

.container { display: flex; flex-wrap: wrap; } 

Quando impostato su no-wrap, gli elementi saranno ancora dimensionati in modo proporzionale gli uni agli altri.Per esempio, immaginate che gli elementi di una lista siano impostati per essere 100px larghi, tranne l’ultimo che è 200px. Gli elementi si ridimensioneranno per adattarsi al contenitore, ma l’ultimo elemento sarà ancora due volte più largo degli altri.

Justify-content

Justify-content determina come inserire il contenuto nella riga o nella colonna.Il valore predefinito è flex-start, che allineerà a sinistra gli elementi. Naturalmente, abbiamo anche flex-end per allineare a destra gli elementi e center per centrarli.Le cose si fanno più interessanti con space-between, che danno uguale spazio tra gli elementi ma non alle estremità, mentre space-around dà uguale spazio anche alle estremità.

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

Questo è meglio usato quando gli elementi hanno larghezze impostate (o hanno raggiunto la loro larghezza massima).

Questo può essere molto utile quando si allineano gli elementi di flexbox alla griglia, senza fare affidamento su cose come i float.

Align-content

Align-content è simile a justify-content, ma controlla dove gli elementi sono sull’asse trasversale. Dico “altro” perché quando usateflex-direction: row, allora align-items controlla l’allineamento verticale, ma quando usate flex-direction: column, è il contrario.

Puoi allineare gli elementi alla linea di base del testo all’interno di ogni elemento usandobaseline. C’è anche un’opzione per rendere ogni elemento span da un’estremità dell’asse all’altra con stretch.

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

Possiamo usare align-items: stretch per risolvere il problema delle “colonne di uguale altezza” che ha afflitto i layout CSS fin dall’inizio. Potete anche impostare siajustify-content che align-items su center per centrare i vostri elementi al centro del vostro contenitore, il che è molto utile per cose come le hero areas e le splash pages.

Ci sono diverse altre proprietà che sono usate meno spesso ma che potreste trovare utili.

Allinea-voci

Allinea-voci influenza le linee di contenuto e dove dovrebbero essere all’interno del loro contenitore. Puoi vedere qui sotto che gli elementi in ogni riga mantengono la loro altezza normale (a meno che tu non stia usando stretch).

.container { display: flex; align-content: stretch; } 

Qualche altra proprietà

Ci sono anche un certo numero di proprietà flexbox per gli elementi nel contenitore.Queste sono un po’ più facili da capire rispetto alle proprietà dei genitori e, fortunatamente, c’è un’utile stenografia che possiamo usare per rendere tutto più facile.

.list-item { flex: <flex-grow> <flex-shrink> <flex-basis>; } 

• flex-grow: <integer> : Questo fornisce un altro modo per dare ai vostri elementi flex larghezze diverse. Se impostate tutti i vostri elementi figli su flex-grow: 1, ma impostate l’ultimo figlio su flex-grow: 2, sarà largo il doppio dei suoi fratelli.
• flex-shrink: <number> : determina come l’elemento si ridurrà quando il contenitore non è abbastanza largo perché gli elementi mantengano la loro larghezza naturale. Se l’ultimo elemento è impostato su flex-shrink: 2 mentre i suoi fratelli sono impostati suflex-shrink: 1, si restringerà il doppio dei suoi fratelli.
• flex-basis: <size> : Ciò che dovremmo considerare essere la dimensione naturale dell’elemento. Questo può essere pensato come il “punto di rottura” al quale le proprietà di crescita e contrazione sono attivate.

Order controlla l’ordine in cui l’elemento appare nel contenitore. I numeri negativi sono accettati e appariranno prima di quello che normalmente sarebbe il primo elemento.

Align-self ha tutte le stesse opzioni di align-items, ma permette di controllare come i singoli elementi sono allineati. Per esempio, i fratelli possono essere impostati suflex-start, ma potete scegliere un elemento da impostare su flex-end.

Probabilmente non li userete tutti insieme, ma una tale mostruosità assomiglierebbe a questa:

.container { align-items: flex-start; display: flex; height: 40em; } .item { flex: 1 1 2em; } .item:nth-child(3) { align-self: flex-end; flex: 2 10 5em; order: -1; } 

Risorse per imparare

Flexbox può essere una cosa difficile da capire, specialmente se siete abituati alle stranezze dei layout CSS tradizionali. Siti come Codepen sono un buon modo per imparare è semplicemente sperimentare e vedere cosa si può ottenere.

Se non siete sicuri di come potreste usare flexbox in un’applicazione del mondo reale, Solved by Flexbox è una grande risorsa messa insieme da Mozilla che presenta molte grandi idee pratiche.

Position

Positioning ci dà un metodo di layout completamente diverso. Il valore predefinito è static, e fa comportare l’elemento normalmente.

Utilizzando position: relative è possibile specificare un offset con topbottomleft, e right.

.logo { position: relative; left: 1em; top: 1em; } 

Questo può essere utile per fare un semplice offset senza usare qualcosa come margin, ma diventa davvero potente quando contiene un bambino con position:absolute.

Posizione assoluta

Il posizionamento assoluto basa la posizione degli elementi rispetto all’elemento padre più vicino che ha position: relative impostato. Se non ne trova uno, sarà relativo al documento.

.hero { position: relative; } .hero-icon { position: absolute; left: 20px; top: 10%; } 

Il posizionamento assoluto non dovrebbe essere usato per disporre colonne di contenuto. Poiché gli elementi vengono rimossi dal flusso del documento, ciò significa che ogni volta che si aggiunge del contenuto a una sezione, potrebbe essere necessario regolare le dimensioni delle altre sezioni a mano, e questo rende il responsive design molto più di una seccatura di quanto non sia necessario.Riservate il posizionamento assoluto per ottenere quei piccoli elementi di design esattamente dove volete che siano. Come regola generale, se un elemento può essere posizionato semplicemente usando i float o una modifica agli stili display, è probabilmente meglio evitare il posizionamento assoluto.

Centrare usando la posizione assoluta

Qualcosa che può essere molto utile ma che blocca molti principianti è centrare gli elementi con il posizionamento assoluto. Se il vostro elemento ha una dimensione impostata, è solo una questione di compensazione con i margini. Prendiamo l’ultimo esempio ma centriamo l’icona sia orizzontalmente che verticalmente. Per centrare un elemento usando il posizionamento assoluto, basta seguire questi passi:

1. Aggiungi left: 50% all’elemento che vuoi centrare. Noterete che questo allinea il bordo sinistro dell’elemento figlio con la linea del 50% del genitore.
2. Aggiungi un margine sinistro negativo che è uguale alla metà della larghezza dell’elemento.Questo ci sposta indietro sul segno di metà.
3. Prossimo, faremo un processo simile per l’asse verticale. Aggiungete top: 50% al bambino
4. e poi aggiungete un margine superiore negativo pari alla metà della sua altezza.

Questo significa che anche se il contenitore può cambiare dimensioni, l’elemento centrato rimarrà proprio dove vogliamo. Il CSS risultante dovrebbe assomigliare a questo:

.container { position: relative; } .centered-element { height: 100px; width: 100px; position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -50px; } 

Posizione fissa

Il posizionamento fisso funziona come absolute, ma è sempre relativo alviewport piuttosto che al documento e rimarrà in posizione quando gli utenti scorrono. Questo può far sentire la vostra app più come un’applicazione nativa, con un’intestazione fissa o una navigazione laterale, o per qualsiasi elemento che volete tenere a portata di mano. Come per il posizionamento assoluto, gli elementi fissi saranno rimossi dal flusso del documento, quindi potrebbe essere necessario aggiungere un padding su un elemento sottostante per assicurarsi che gli altri contenuti siano ancora visibili.

Sticky position

Il posizionamento sticky è il più nuovo del gruppo. Ci sono alcuni grandi articoli su come usarlo, così come le alternative javascript.Questo non dovrebbe essere confuso con la sempre popolare tecnica dello sticky footer, che merita anch’essa una menzione speciale.

Z-index

La proprietà position ci dà il vantaggio di poter specificare loz-index dei nostri elementi. Se torniamo alla nostra metafora di vedere gli elementi come pezzi di carta, impostare la proprietà z-index ci permette di specificare se il nostro foglio è sopra o sotto gli altri pezzi. Un numero più alto apparirà sopra, e un numero più alto apparirà sotto. Potete anche usare un numero negativo, che può far apparire l’elemento dietro il genitore (o anche dietro il documento interamente)! Questo può portare ad una sorta di corsa agli armamenti con numeri sempre più alti per assicurarsi che un elemento sia sempre in cima. Questo può diventare piuttosto ingestibile ed è meglio usare il posizionamento e gli indici z in modo conservativo.

Floats

I floats sono la tecnica di layout più comunemente usata nei CSS, ma possono essere frustranti se non si sa come influenzano gli elementi vicini. Quando stili un elemento con float: left, gli elementi seguenti rifluiranno, il flusso del documento è solo l’ordine del contenuto e come gli elementi si dispongono l’uno intorno all’altro. Se l’elemento flottante non ha una larghezza fissa, collasserà alla larghezza del contenuto. Se l’elemento seguente è più stretto dello spazio rimanente, si sposterà a destra. Tenete a mente che gli elementi impostati su display: block dovranno avere una larghezza impostata o rimarranno sulla propria linea.

Potete evitare che un elemento collassi dandogli una proprietà clear nel vostro foglio di stile. Le opzioni includono clear: bothclear: left (che permetterà ancora il riflusso degli elementi che seguono con float: right), e clear: right (che fa il contrario). Potete anche usare clear: none per sovrascrivere il comportamento predefinito.

Perché i figli fluttuanti faranno collassare i loro elementi genitori, sarete tentati di creare nuovi elementi solo per aggiungere clear: both ed evitare questo comportamento. Anche se questo funziona, vogliamo mantenere il nostro markupsemantico quindi questo dovrebbe essere fatto solo usando i CSS se possibile. Usando uno::after pseudo-elemento, si può creare un clearfix:

 .container::after { clear: both; content: ""; display: table; } 

Utilizzando un preprocessore come Bourbon è facile aggiungere questo come Sass mixin:

 .container { @include clearfix; } 

I float funzionano meglio per i grandi contenitori, ma potrebbero non funzionare così bene per gli elementi di testo poiché sarà difficile allinearli. Potreste scoprire che usare display:inline-block è meglio per queste situazioni.