Ente accreditato Regione Veneto n.4271

Flexbox, esercizi di base per la strutturazione [Lezione 2]

Dinamiche di creazione di intestazione con metodo tradizionale vs Flexbox

Pubblicato da Simone // 9 marzo 2017 // 385 visualizzazioni

In questa seconda lezione andiamo a vedere come possiamo rapportare le normali modalità di esecuzione, con le tradizionali dichiarazioni, trasportando di fatto il tutto seguendo il metodo Flexbox.

Nelle prossime lezioni andremo a sviluppare diverse zone di un sito web standard, partiamo quindi con un esempio pratico di come possiamo gestire, con molta facilità e in ottica completamente responsive, un intestazione (Header).

MENU DELLE LEZIONI

Lezione 1: introduzione e primo approccio

Lezione 2: esercizi di base per la strutturazione

Lezione 3: gestione del menù di navigazione

Lezione 4: gestione dei layout multicolonna

Lezione 5: gestire il Grid System

Nella figura sotto vediamo due esempi di intestazione basilare, il primo creato con le modalità tradizionali mentre il secondo con Flexbox. Il risultato è pressoché identico ma, come possiamo ben immaginare, gli attributi/valori di CSS sono completamente diversi.

#Flexbox, esercizi di base per la strutturazione | LEZIONE 2 #venetoformazione #css Click to Tweet

Flex Header

Dopo aver eseguito le solite procedure di normalize del CSS andiamo a definire i parametri del primo in HTML

Flex Header

e relativo foglio di stile

Flex Header

Il mio content ha quindi una dichiarazione di larghezza pari a 1170px come nella migliore tradizione di Bootstrap, un’altezza pari a 100px e l’assegnazione di posizione, colore di sfondo e colore del testo. Nella gestione delle dinamiche relative al posizionamento del testo uso i classici attributi text-align con valore center e line-height (interlinea) con valore pari all’altezza del contenitore. In questo modo definisco il mio testo al centro top-bottom e left-right, situazione abbastanza comune.

#Flexbox, esercizi di base per la strutturazione Click to Tweet

Questa strutturazione ha però un limite, in caso di cambio di altezza del content avremo la necessità di modificare anche il valore in line-height per mantenere invariata la situazione. Vediamo invece come, in maniera molto semplice e sfruttando una sola riga di codice in più, Flexbox mi permetta di bypassare il problema.

Inseriamo quindi di seguito il seguente codice HTML per visualizzare il secondo esempio

Flex Header

e applichiamo la seguente dichiarazione al CSS

Flex Header

Come possiamo già notare le dichiarazioni iniziali sono le stesse del modello precedente mentre nelle ultime 3 troviamo le novità. In primis è necessario dichiarare il valore display: flex al nostro contenitore. Eseguito questo passaggio andiamo a sostituire text-align: center con il corrispettivo justify-content: center per la gestione dei valori left-right e line-height: altezza del contenitore con align-items: center.

Il vantaggio di questo approccio dovrebbe essere già chiaro, la dichiarazione di align-items non presenta valori numerici e questo ci indica che il posizionamento top-bottom del testo è relazionato all’altezza. In caso quindi di aumento o diminuzione della stessa (impossibile in questo caso data la specifica dichiarazione 100px ma supponiamo di lavorare con un min-height) nel passaggio da un desktop a un tablet piuttosto che uno smartphone, non richiederà da parte nostra ulteriori interventi al codice mentre nella situazione sopra si.

Anche oggi abbiamo quindi aggiunto un piccolo tassello per la comprensione di questo metodo; la prossima lezione uscirà il 23 Marzo e parleremo di Nav ovvero come gestire  menù di navigazione e liste elenco non ordinate in tutte le salse.

Stay tuned

Topic: , ,

Send this to a friend