CSS – 5 Tecniche Flexbox pronte all’uso

Giusto il tempo che anche i browser più datati finiscano nel dimenticatoio del web (qualcuno ha detto IE9?), ed il modello flexbox dei CSS potrà diventare standard. Fioccano in rete tips e consigli per iniziare ad usarlo in modo efficace, in questo tutorial vediamo come ottenere rapidamente 5 risultati che richiederebbero diversi Hack se utilizzassimo gli approcci del passato.

Colonne con la stessa altezza

Personalmente, ad oggi, per realizzare elementi con la stessa altezza in modo “dinamico” mi avvalevo dell’ottimo script matcHeight.js, laddove min-height non veniva in soccorso in modo efficace. Attraverso il flex-model non c’è niente di più semplice in quanto le colonne create vengono istanziate con altezze uguali di default. Come? Così:

.container {
  /* Inizializza il flex model */
	display: flex;
  /* Valori di default che impostiamo a scopo didattico */
	flex-direction: row; /* Disponi orizzontalmente gli elementi dentro container */
  align-items: stretch; /* Gli elementi dentro container prendono l'altezza massima consentita */
}

Per vedere un esempio concreto di applicazione vi invito a vedere questa pagina d’esempio (dove main e aside se ispezionate il sorgente hanno la stessa altezza).

Elementi riordinati

Una delle potenzialità del Flexbox è la possibilità di cambiare al volo l’ordinamento degli elementi. Questo può risultare utile, per esempio in ambito SEO, per decidere di mostrare visivamente prima alcuni elementi che a livello di codice si trovano dopo. Oppure possiamo finalmente “spostare” gli elementi quando facciamo uso delle media-queries per elementi responsive.

Ad oggi infatti si era costretti a mantenere la stessa sequenza visiva su Desktop e su Mobile andando ad incolonnare gli elementi.

Grazie a questa potenzialità non saremo più vincolati:

.container{
   display: flex;
}
/* Visivamente fa fede l'ordinamento impostato dai CSS */
.blue{
   order: 3;
}
.red{
   order: 2;
}
.green{
   order: 1;
}

Centrare elementi orizzontalmente e verticalmente

Una delle operazioni per cui chiunque ha perso tempo nel corso della sua carriera di web designer trova finalmente LA soluzione tramite il modello flexbox. Stop a display table, a pseudoelementi al 100% ecc… Justify-content e Align-items saranno da oggi le vostre migliori amiche!

.container{
	display: flex;
	/*Centra sull'asse primario */
	justify-content: center;
	/* Centra sull'asse secondario */
        align-items: center;
}

Responsive, da orizzontale a verticale

Tramite l’utilizzo delle proprietà flex-direction e di flex possiamo passare rapidamente da un layout che si sviluppa in orizzontale ad uno che si sviluppa in verticale:

.container{
	display: flex;
}
/* impostiamo quanto spazio sul totale occupano le colonne */
.col-1{
	flex: 1;
}
.col-2{
	flex: 2;
}
@media (max-width: 800px){
	.container{
		/* Trasformiamo le righe in colonne */
		flex-direction: column;		
	}
}

Sticky footer delle mie brame!

Come ti blocco in fondo alla pagina senza impazzire? L’operazione da svolgere qui è più complessa, infatti dobbiamo impostare al body e all’html un’altezza del 100%, dopodichè dobbiamo dire, tramite la proprietà flex, “quanto spazio deve occupare” il corpo della pagina e quanto il footer. Come? Così (descrizione nel codice):

html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.main{
   /* La sezione principale del sito prenderà tutto lo spazio disponibile nella pagina che non è occupato dal footer */
   flex: 1 0 auto;
}
footer{
   /* Il footer prendereà tutto lo spazio verticale che server e non un pixel di più. */
   flex: 0 0 auto;
}

Se qualche proprietà ti fosse poco chiara ti invito a leggere questo post per approfondire: Flex – CSS Tricks

Articolo ispirato a 5 Flexbox Techniques You Need to Know About