Ente accreditato Regione Veneto n.4271

Flexbox, gestire il Grid System [Lezione 5]

Impostazioni, attributi e valori per un uso corretto della griglia fluida responsive

Pubblicato da Simone Baldassin // 11 aprile 2017 // 348 visualizzazioni

Come gestire le grid system con flexbox

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.

GridSystem

#Flexbox, gestire il Grid System | LEZIONE 5 #venetoformazione #css Click to Tweet

Apriamo quindi il nostro editor di fiducia e andiamo ad inserire il seguente codice HTML:

GridSystem

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.

GridSystem

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:

  1. flex-grow, il fattore di ingrandimento del box rispetto allo spazio disponibile;
  2. flex-shrink, il fattore di restringimento tra i box;
  3. flex-basis, la dimensione principale iniziale del box.

La figura che segue dovrebbe essere sufficiente per permetterci di capire come stiamo disponendo gli elementi:

GridSystem

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.

GridSystem

Il risultato che andiamo ad ottenere sarà quindi simile al seguente una volta scesi sotto la soglia dei 768px di larghezza.

GridSystem

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.

Topic: , ,

Send this to a friend