Ente accreditato Regione Veneto n.4271

Flexbox, introduzione e primo approccio [lezione 1]

Una breve introduzione a una delle più promettenti specifiche di CSS

Pubblicato da Simone Baldassin // 23 febbraio 2017 // 921 visualizzazioni

flexbox

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.

Flexbox-layout

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.

#Flexbox, introduzione e primo approccio | LEZIONE 1 #venetoformazione #css Click to Tweet

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

Flexbox-layout

Proprietà dei box flessibili interni

Flexbox-layout

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.

Flexbox-layout

Per farlo utilizziamo (per comodità) i marcatori di HTML5 e andiamo a compilare la nostra pagina come segue

Flexbox-layout

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;

Flexbox-layout

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.

Flexbox-layout

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.

Flexbox-layout

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).

Topic: , ,

Send this to a friend