Lo dice il titolo stesso, se non è il futuro del layout è sicuramente una delle più interessanti opzioni messe sul piatto dalle specifiche di CSS. Stiamo parlando ovviamente del metodo Flexbox.
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
Questa specifica per la strutturazione di layout flessibili ha oramai raggiunto una compatibilità ragguardevole con i vari browser, come possiamo vedere dalla tabella qui sotto.
Ovviamente questo metodo non andrà a sostituire regole come Float, Position, Display: Table che gestiscono determinati fattori e risvolti problematici nella strutturazione e hanno una totale retro compatibilità con i vecchi browser, ma si pone come valido strumento in più, un valore aggiunto per gestire le nostre strutture.
[easy-tweet tweet=”#Flexbox, introduzione e primo approccio | LEZIONE 1 #venetoformazione #css”]
Sono infatti ben 3 le versioni rilasciate della specifica e hanno ricevuto, negli anni, compatibilità più o meno buona nei vari browser del momento. In parole povere la semplice dichiarazione a un selettore qualsivoglia di attributo display con valore flex comporta a oggi l’aggiunta di numerosi prefissi proprietari per avere la totale certezza che tutti gli utenti ne possano usufruire in maniera soddisfacente.
In questo articolo vedremo una breve introduzione alle proprietà di base del metodo costruendo un layout standard utilizzando gli attributi e i valori più comuni dello stesso. Vediamone le direttive in queste tabelle di riferimento dal sito html.it.
Proprietà dei contenitori
Proprietà dei box flessibili interni
Come è ovvio che sia, prima di poter utilizzare in maniera professionale delle specifiche, è necessario comprenderne le dinamiche partendo dalle basi, supponiamo quindi di voler realizzare l’esempio in figura.
Per farlo utilizziamo (per comodità) i marcatori di HTML5 e andiamo a compilare la nostra pagina come segue
Passiamo ora alla gestione del nostro css; non diamo peso a header e footer, questi infatti vengono gestiti con le classiche modalità di formattazione che ben conosciamo e soffermiamoci invece sul content. Questo dovrà essere infatti inizializzato a divenire un layout flessibile, andiamo quindi a dichiararlo display: flex;
A questo punto tutti i nostri elementi all’interno, privi di ulteriori regole, si distribuiranno su tutto lo spazio disponibile basandosi sul contenuto (come nel regolare flusso del codice verticale) ma comportandosi di fatto come se fosse stato loro assegnato un attributo float.
Le regole successive che andiamo ad assegnare ad article e aside sono flex-direction e flex-wrap; la prima definisce la disposizione degli elementi nel contenitore mentre la seconda come questi si dispongano su una riga o su più righe in base allo spazio disponibile.
Ultimo ma non ultimo andiamo a dichiarare l’attributo flex (leggi tabelle sopra) e definiamo come disporre la larghezza dei 2 marcatori in relazione alle dimensioni del content.
Non ci rimane ora quindi che andare a lavorare sulla media queries per il mobile che, come possiamo immaginare, vuole tutti gli elementi disposti in verticale. Per farlo ci basta definire il selettore content con un attributo flex-flow (sintassi abbreviata per flex direction e flex wrap) con valore column wrap. In parole povere sto dicendo al mio contenitore di disporsi come unica colonna mettendo il contenuto su una riga. Gli elementi flessibili al suo interno si comporteranno di conseguenza.
Molto interessante l’utilizzo (come vediamo in figura sopra) dell’attributo order assegnato alle nostre ex colonne. Questo infatti mi permette di definire una priorità nell’ordine di visualizzazione degli elementi. Se proviamo infatti a invertire i valori vedremo che, nel flusso verticale, gli elementi invertiranno la loro posizione a prescindere dalla dichiarazione.
Naturalmente questa è solo una prima introduzione del metodo Flexbox che, come possiamo già vedere, ha delle dinamiche molto interessanti in ottica strutturale per layout di nuova generazione.
Ritorneremo presto sull’argomento con ulteriori esempi e modelli, la seconda lezione sul metodo Flexbox sarà online il 9 Marzo e parleremo di intestazioni (header).
Nel frattempo, se sei interessato ad approfondire questo e altri argomenti simili, puoi dare un’occhiata al nostro corso di web design.
Ancora nessun commento