LayoutGiorgio Piccardo

LayoutLe tecniche di impaginazione CSS ci permettono di prendere gli elementi contenuti in una pagina web e controllare dove sono posizionati rispetto alla loro posizione di default nel normale flusso di layout, agli altri elementi intorno a loro, a il loro contenitore genitore o alla finestra principale della pagina.

Tecniche per il LayoutFlusso normale

La proprietà display

Flexbox

Grid

Floats

Posizionamento

Tabelle

Flusso NormaleIl flusso normale è come il browser definisce di default le pagine HTML quando non si fa nulla per controllare il layout della pagina.

<p>Colori primari sottrattivi</p><ul> <li>Ciano</li> <li>Magenta</li> <li>Gialli</li></ul><p>Fine</p>

Flusso NormaleNota come l'HTML viene visualizzato nell'ordine esatto in cui appare nel codice sorgente, con gli elementi che appaiono uno sopra l'altro - il primo paragrafo, seguito dalla lista non ordinata, seguito dal secondo paragrafo.

Gli elementi che appaiono uno sotto l'altro sono descritti come elementi di blocco, in contrasto con gli elementi in linea, che appaiono uno accanto all'altro, come le singole parole in un paragrafo.

La proprietà DisplayQuesta proprietà ci consente di modificare il modo predefinito in cui viene visualizzato qualcosa. Tutto nel flusso normale ha un valore di visualizzazione predefinito. Ad esempio, il fatto che i paragrafi si mostrino uno sotto l'altro è dovuto al fatto che hanno proprietà display: block.

È possibile modificare questo comportamento di visualizzazione predefinito. Ad esempio, gli elementi <li> vengono di default visualizzati a blocco. Se cambiamo il valore in display: inline, ora verranno visualizzati l'uno accanto all'altro.

Inline-blockE’ possibile anche definire la proprietà display: inline-block

Gli inline-block sono elementi in linea a cui è però possibile specificare un’altezza e una larghezza.

FlexboxProgettato per semplificare la disposizione di elementi in una sola dimensione, sia come riga che come colonna. Per usare la flexbox, bisogna applicare la proprietà display: flex all'elemento padre; tutti i suoi figli diretti diventano quindi oggetti flex.

.container { display: flex;}

Flex DirectionFlexbox fornisce una proprietà chiamata flex-direction che specifica in quale direzione viene eseguito l'asse principale (in quale direzione sono disposti i figli della Flexbox): di default, questa è impostata su row (riga) , che li rende disposti in fila nella direzione predefinita del browser (da sinistra a destra, nel caso di un browser italiano).

.container { flex-direction: row | row-reverse | column | column-reverse;}

Flex DirectionI valori possibili sono :

row (default): da sinistra a destrarow-reverse: da destra a sinistracolumn: da sopra a sottocolumn-reverse: da sotto a sopra

Flex WrapDi default, gli elementi flex cercano di disporsi in una sola riga. Quando gli elementi sono troppi meno spazio avranno a disposizione. Un modo in cui è possibile risolvere questo problema è aggiungere la proprietà flex-wrap: wrap

AlignmentÈ possibile utilizzare le funzioni di flexbox per allineare gli elementi flex lungo l'asse principale o

trasversale utilizzando la proprietà align-items. I valori possibili sono:

flex-start:flex-end: center: baselinestretch (default)

Flexbox, una guida completa

A questo indirizzo trovi una guida più completa e dettagliata sull’utilizzo della flexbox

Grid LayoutMentre flexbox è progettato per un layout monodimensionale, Grid Layout è progettato per due dimensioni: allineamento di elementi in righe e colonne.

È possibile attivare il layout della griglia impostando la proprietà display: grid

Grid LayoutSi definiscono le colonne e le righe della griglia con un elenco di valori separati da spazi. I valori rappresentano la dimensione della traccia e lo spazio tra di essi rappresenta la linea della griglia.

Grid Layout

.container { grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto;}

FloatsIl floating di un elemento modifica il comportamento di quell'elemento e gli elementi a livello di blocco che lo seguono nel flusso normale. L'elemento viene spostato a sinistra o a destra e rimosso dal flusso normale e il contenuto circostante galleggia attorno all'elemento flottato.

La proprietà float ha quattro possibili valori:

left: fa scorrere l'elemento a sinistra.right: fa scorrere l'elemento a destra.none - Non specifica affatto floating. Questo è il valore predefinito.inherit: specifica che il valore della proprietà float deve essere ereditato dall'elemento padre

Float

ClearPer impedire che un elemento successivo subisca anche esso il float di quello precedente si utilizza la proprietà clear.

Visto che il float sposta un elemento dal flusso normale del documento, è possibile che esso venga a trovarsi in posizioni non desiderate, magari al fianco di altri elementi che vogliamo invece tenere separati. clear risolve questo problema.

none gli elementi con float possono stare a destra e sinistra dell’elementoleft si impedisce il posizionamento a sinistraright si impedisce il posizionamento a destraboth si impedisce il posizionamento su entrambi i lati

Posizioneposition è la proprietà fondamentale per la gestione della posizione degli elementi.

I valori con cui è possibile definire la modalità di posizionamento sono quattro:

staticrelativeabsolutefixed

Posizione staticGli elementi HTML di default sono posizionati statici.

Gli elementi non posizionati secondo alcun metodo.

Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento.

Posizione relativeL’elemento viene posizionato relativamente al suo box contenitore.

La posizione viene impostata con le proprietà top, left, bottom o right.

Nel posizionamento relativo esse non indicano un punto preciso, ma l’ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.

Posizione absoluteL’elemento, o meglio, il box dell’elemento, viene rimosso dal flusso del documento ed è posizionato in base ai valori forniti con le proprietà top, left, bottom o right.

Non dipende dall’elemento in cui è contenuto.

Il posizionamento assoluto ( position: absolute; ) avviene sempre rispetto al box contenitore dell’elemento. Questo è rappresentato dal primo elemento padre che abbia un posizionamento diverso da static.

Posizione fixedIl box dell’elemento viene, come per absolute, sottratto al normale flusso del documento.

Un box posizionato con fixed non scorre con il resto del documento.

OverflowLa proprietà CSS overflow fornisce un modo per gestire il contenuto che superi i limiti imposti con height.

I valori possono essere espressi con le parole chiave:

visible valore iniziale, il contenuto eccedente rimane visibile

hidden il contenuto eccedente non viene mostratoscroll il browser crea barre di scorrimento che consentono di fruire del contenutoauto il browser tratta il contenuto eccedente secondo le sue impostazioni predefinite

Layout a TabellaLe tabelle HTML vanno bene per la visualizzazione di dati tabulari, ma molti anni fa, prima ancora che il CSS fosse supportato in modo affidabile attraverso i browser, gli sviluppatori web usavano anche le tabelle per interi layout di pagina web, inserendo intestazioni, piè di pagina, colonne diverse, ecc. righe e colonne della tabella. Ciò ha funzionato al momento, ma ha molti problemi: i layout delle tabelle non sono responsive ( non si adattano al cambiare della dimensione dello schermo ), molto onerosi, difficili da debuggare.

Grazie