CSS Tecniche Flexbox – 2 e ultima parte

TECNICHE FLEXBOX Creazione griglie completamente responsive La ...

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