In precedenti articoli ci siamo soffermati ad imparare e conoscere la griglia fluida di Bootstrap; ovviamente anche il metodo Flexbox ci permette di gestire degli elementi fluidi per i nostri siti responsive, vediamo di seguito come procedere alla creazione del nostro grid system personalizzato.
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
Vediamo subito da figura successiva la dinamica della struttura che andremo a realizzare.
[easy-tweet tweet=”#Flexbox, gestire il Grid System | LEZIONE 5 #venetoformazione #css”]
Apriamo quindi il nostro editor di fiducia e andiamo ad inserire il seguente codice HTML:
Useremo la classe column per la formattazione generale, mentre per la gestione delle opzioni possibili andremo ad applicare una seconda classe col-md-valore tenendo presente che il totale massimo che gestiremo è di 6 colonne.
Il nostro container flex avrà quindi come dichiarazione il direction: row e la disposizione: wrap.
Per poter gestire le griglie fluide il principio si basa sempre e comunque su un’unità di misura in percentuale. Andiamo quindi a settare la nostra dichiarazione con una sintassi abbreviata usando l’attributo flex che richiama nell’ordine:
- flex-grow, il fattore di ingrandimento del box rispetto allo spazio disponibile;
- flex-shrink, il fattore di restringimento tra i box;
- flex-basis, la dimensione principale iniziale del box.
La figura che segue dovrebbe essere sufficiente per permetterci di capire come stiamo disponendo gli elementi:
Nelle media queries CSS andiamo a impostare il valore del nostro content una volta superato il limite dei 1170px come risoluzione dello schermo, ma manteniamo la nostra strutturazione flex per la griglia. Questa sarà così pertanto in tutti i dispositivi desktop e nella maggior parte dei tablet in landscape.
Negli smartphone andiamo invece a forzare la regola flex settando tutti gli elementi in verticale con larghezza pari al 100% dello spazio disponibile.
Il risultato che andiamo ad ottenere sarà quindi simile al seguente una volta scesi sotto la soglia dei 768px di larghezza.
Grazie a questa nuova lezione siamo già in grado, applicandola alle nozioni precedentemente acquisite, di ragionare in termini flex per costruire interi siti web quasi senza l’ausilio di regole basilari HTML che siamo soliti utilizzare.
La prossima lezione sarà online il 4 Maggio e vedremo come usare Flexbox per rimpiazzare strutture e ordinamenti che siamo soliti gestire con display Table.
A buon rendere.
Ancora nessun commento