Iniziamo a fare sul serio, in questo terzo appuntamento andiamo a vedere come Flexbox ci permetta di gestire le liste elenco, che contengono i nostri menù di navigazione, in maniera molto performante e, naturalmente, responsive.
[easy-tweet tweet=”#Flexbox: gestione del menù di navigazione | LEZIONE 3 #venetoformazione #css”]
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
La struttura che andremo a realizzare è quella della figura che segue
Come possiamo vedere abbiamo un menù di navigazione che si presenta in 5 diverse modalità di visualizzazione; a ognuna delle liste, infatti, è stata data una differente formattazione utilizzando più attributi di Flexbox, fatta esclusione per la prima che ci presenta il default.
Come sempre andiamo a effettuare un normalize del CSS e passiamo alla formattazione standard; definiamo un contenitore come da figura che contenga il tutto.
Formattiamo le liste generali.
Torniamo un attimo indietro nel foglio di stile e, tra il contenitore e la formattazione dei marcatori li, iniziamo a dare le regole alle ul; abbiamo chiamato la prima semplicemente .nav; andiamo ora a dichiararla come da figura successiva.
Vediamo che, oltre a dichiarare la lista display: flex; andiamo a definire una direzione degli elementi al suo interno utilizzando i diversi valori forniti dall’attributo flex-direction.
I valori possibili sono:
- row: valore di default, gli elementi partono da sinistra;
- row-reverse: gli elementi partono da destra;
- column: gli elementi vanno uno sotto l altro;
- column-reverse: gli elementi vanno uno sotto l altro in ordine decrescente.
Possiamo già capire da soli come questi vadano a sostituire i valori classici che siamo abituati ad utilizzare normalmente.
Passiamo ora a creare le altre 4 liste, alle quali assegneremo la classe nav per la formattazione generale, e una seconda classe per gestire un attributo specifico che risponde al nome di justify-content. Chiameremo la prima .end, la seconda .center, la terza .between e la quarta .around.
Nel CSS andiamo ad assegnare, ad ognuna di queste, un valore differente all attributo justify-content cosi che possiamo vedere subito come si comportano.
Come possiamo vedere, i valori che utilizziamo sono flex-end, center, space-between e space-around.
Vediamoli nel dettaglio:
- flex-end: gli elementi partono a destra;
- center: gli elementi vanno al centro senza dover dare nessuna dichiarazione ulteriore;
- space-between: gli elementi si distribuisco sinistra, centro, destra sfruttando tutto lo spazio disponibile;
- space-around: gli elementi si distribuisco sinistra, centro, destra ma gestendo lo spazio vuoto.
Da bravi designer quali siete potete immaginare il quantitativo industriale di problematiche che questi attributi risolvono nei nostri layout.
Con la dovuta pratica potete far vostro questo metodo di lavoro in brevissimo tempo e bypassare le normali difficoltà nate dalla gestione dei parametri standard di liste e menù.
La prossima lezione sarà online il 6 Aprile e vedremo come mescolare queste dichiarazioni e come gestire i layout multicolonna in maniera semplice e efficace.
A buon rendere.
Ancora nessun commento