Layout

Le tecniche di layout ci permettono di posizionare dove vogliamo gli elementi di una pagina...

Flusso normale

Il flusso normale è il modo che ha il browser di inserire gli elementi nella pagina quando il programmatore non specifica altro per controllare il layout. Guardiamo quest'esempio:

Notiamo come gli elementi sono mostrati nell'esatto ordine con cui appaiono nel codice sorgente, dall'alto in basso.

La proprietà display

Questa proprietà ci permette di cambiare il modo in cui un elemento viene mostrato. Ad esempio se creiamo un link questo viene mostrato come un elemento inline, ma possiamo cambiare la proprietà display in modo che diventi un elemento di tipo blocco.

Flexbox

Flexbox è l'abbreviazione per il modulo Flexible Box Layout, pensato per rendere più semplice la disposizione di oggetti lungo una dimensione (una riga o una colonna). Per usarlo si applica la proprietà display: flex al contenitore.

L'esempio che segue mosta un contenitore (wrapper) con tre div, che normalmente sarebbero mostrati uno sopra l'altro. Dato che viene applicata la modalità flex al contenitore, i tre div appaiono come colonne, e la loro altezza è pari a quella dell'elelemento più alto.

Applicando ai div la proprietà flex: 1, essi crescono e riempiono il contenitore:

Grid

Mentre flexbox è progettato per layout unidimensionali, il layout Grid è progettato per due dimensioni, allineando le cose in righe e colonne:

Il layout griglia permette di posizionare gli elementi a piacere specificando la riga e la colonna di partenza:

Floats

Rendere un elementi fluttuante (float) lo toglie dal normale flusso della pagina e lo sposta a sinistra o a destra, mentre il resto del contenuto fluttua attorno ad esso.

Float può avere i valori: left, right, none, inherit.

Nell'esempio seguente rendiamo fluttuante il box e gli diamo un margine destro in modo che il testo gli scorra attorno a una certa distanza.

Esercizio

Crea il seguente layout, riproducendo anche i colori di sfondo e gli angoli arrotondati: