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.
[easy-tweet tweet=”#Flexbox, esercizi di base per la strutturazione | LEZIONE 2 #venetoformazione #css”]
Dopo aver eseguito le solite procedure di normalize del CSS andiamo a definire i parametri del primo in HTML
e relativo foglio di stile
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.
[easy-tweet tweet=”#Flexbox, esercizi di base per la strutturazione”]
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
e applichiamo la seguente dichiarazione al CSS
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.
Ancora nessun commento