il layout di un sito

il layout di un sito

il sistema preistorico

C'erano una volta le tabella, le tables: con cui si impaginavano le pagine, mettendo i contenuti nella celle di sinistra, in quelle di centro e in quelle di destra.

un sistema più recente, le sezioni flottanti

Giustamente tale abitudine, deprecata dal w3c, è stata poi scartata in favore dei layouts flessibili con comando float.

Si crea una div come contenitore e poi al suo interno si colloca la colonna di sinistra (float: left) e quella di destra (float: right), come nell'esempio seguente:

il sistema migliore: il flexbox

Oggi la soluzione più avanzata (di cui parliamo anche a proposito di centratura di elementi) è il flexbox.

Esso semplifica molto la vita, ad esempio permette in modo semplice e pulito (a differenza di float) di accostare non solo due ma anche tre o più colonne. Vediamo l'esempio seguente:

Vi è una div contenitrice (display: flex) e delle div contenute (flex: 1 1 [+ percetuale: ad esempio 30%])

Il flexbox può rapidamente adattarsi alle dimensioni dello schermo, mediante le media queries. Qui lo facciamo vedere semplicemente col passaggio del mouse:

giocando con flexbox

allineare verticalmente: align-items

Proviamo ad allineare verticalmente al centro. Questo il codice: display: flex; flex-flow: row; align-items: center;

Proviamo ad allineare verticalmente in basso. Questa volta useremo align-items: flex-end.

align-self

Allineiamo in basso con eccezione della colonna centrale, che va verso l'alto: align-self

allineare orizzontalmente: justify-content

Per allineare orizzontalmente al centro, usiamo justify-content: justify-content: center

un problema

C'è un problema però: è arduo unire a flexbox la proprietà postion:fixed. Ne parliamo in un'altra pagina.

multicolonna con column-count e con flex

Si vede che con flex gli elementi affiancati hanno la stessa altezza, mentre con column-count no.

con column-cont

con flex