CSS Tecniche Flexbox – 2 e ultima parte

Titolo: CSS Tecniche Flexbox – 2 e ultima parte
Sezione: web
Data: 25.09.2018
TECNICHE FLEXBOX

Creazione griglie completamente responsive
La maggior parte degli sviluppatori fa affidamento su un framework CSS durante la creazione di griglie responsive. Bootstrap è il più popolare tra questi, ma ci sono centinaia di librerie che possono aiutarvi in questo compito. Solitamente sono affidabili, funzionano bene e hanno svariate opzioni anche se a volte tendono ad essere pesanti. Se non vuoi implementare un intero framework solo per gestire una griglia , Flexbox è la soluzione migliore. Flexbox è semplicemente un contenitore con la proprietà  display: flex, mentre le colonne orizzontali al suo interno possono essere costituite da un numero qualsiasi di elementi. Il modello flex si adatta alle dimensioni del viewport, apparendo correttamente su tutti i dispositivi. Tuttavia,possiamo facilmente trasformare il layout da orizzontale a verticale.

Footer sticky
Anche per  la creazione di un footer sticky, Flexbox ha  una soluzione semplice a questo problema. Se applichiamo la proprietà flex al tag Body possiamo costruire l’intero layout di pagina utilizzando le proprietà di flex.

html{
    height: 100%;
}

body{
    : flex;
    flex-direction: column;
    height: 100%;
}

.main{
   /* The main section occuperà tutto lo spazio disponibile tranne che quello occupato da l footer*/
   flex: 1 0 auto;
}

footer{
   /* The footer occuperà in altezza lo spazio a lui necessario, non un pixel in più. */
   flex: 0 0 auto;
}

Questa struttura consente  al contenuto principale del sito web di essere  flessibile e permette al footer di comportarsi in maniera sticky.

Kenji Agency : creazione siti web a Treviso