Layout

Giorgio Piccardo
Layout
Le 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 Layout
Flusso normale Floats

La proprietà display Posizionamento

Flexbox Tabelle
Flusso Normale
Il 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 Normale
Nota 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à Display
Questa 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-block
E’ 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.
Flexbox
Progettato 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 Direction
Flexbox 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 Direction
I valori possibili sono :

row (default): da sinistra a destra

row-reverse: da destra a sinistra
column: da sopra a sotto
column-reverse: da sotto a sopra
Flex Wrap
Di 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:
baseline
stretch (default)
Flexbox, una guida completa
A questo indirizzo trovi una guida più completa e dettagliata
sull’utilizzo della flexbox
Floats
Il 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
Clear
Per 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’elemento
left si impedisce il posizionamento a sinistra
right si impedisce il posizionamento a destra
both si impedisce il posizionamento su entrambi i lati
Posizione
position è la proprietà fondamentale per la gestione della posizione degli
elementi.

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

static
relative
absolute
fixed
Posizione static
Gli 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 relative
L’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 absolute
L’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 fixed
Il 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.
Overflow
La 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 mostrato
scroll il browser crea barre di scorrimento che consentono di fruire del contenuto
auto il browser tratta il contenuto eccedente secondo le sue impostazioni predefinite
Layout a Tabella
Le 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