Eccoci alla quarta lezione sul metodo CSS Flexbox dove andiamo a vedere la gestione di un layout multicolonna, situazione abbastanza comune in tutti i siti web di nuova generazione.
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
Come sempre partiamo da ciò che andremo a realizzare
Vediamo come header sia ripresa pari pari dagli esercizi già visti, vediamo un menù di navigazione con una particolarità , ovvero il posizionamento di una delle voci al lato, diametralmente opposto rispetto alle prime 3 e vediamo, infine, le 3 colonne classiche su cui, per ora, non ci soffermiamo.
Partiamo dal nav quindi che andiamo a inserire dentro un contenitore e una lista elenco non ordinata a cui andiamo ad applicare le oramai acquisite regole display: flex; e flex-direction: row;. Col valore row di default le nostre liste partono da sinistra come nel normale flusso del codice e vanno in linea seppure senza la dichiarazione float.
[easy-tweet tweet=”#Flexbox, gestione dei layout multicolonna | LEZIONE 4 #venetoformazione #css”]
Vediamo anche in figura le dichiarazioni per la gestione delle liste dove, justify-content: center; e align-items: center; permettono la totale gestione (come visto in precedenza) della creazione di un pulsante senza disturbare i classici valori text-align e line-height.
La novità viene nella gestione dell’ultima voce della lista, vediamo infatti come, semplicemente dichiarando margin-left: auto; il metodo Flexbox permette di far occupare tutto lo spazio disponibile spingendo letteralmente l’elemento flex al lato opposto della dichiarazione.
Anche in questo caso non abbiamo avuto bisogno di alcun float e text-align.
Passiamo finalmente alle nostre colonne dove, ovviamente, l’esempio è valido per 2, 3, 4 o quante colonne decidiamo di avere nella nostra pagina.
Definiamo in primis il contenitore che, grazie alla dichiarazione flex-flow: row nowrap; permette di impedire agli elementi di disporsi su più righe. Utilizziamo quindi justify-contert: space-between;, che già abbiamo visto nell’esercizio precedente, e applichiamo il valore stretch ad align-items.
Molto importante quest’ultimo perché ci permette di risolvere una delle problematiche maggiori nella disposizione di colonne responsive, ovvero la gestione dell’altezza in base al contenuto. Grazie a questa regola gli elementi flex all’interno del contenitore occuperanno tutto lo spazio disponibile basandosi sull’elemento con valore height più alto.
Passiamo quindi alla formattazione di colonne e testi.
E vediamo infine come risolvere un altro fastidio problema che possiamo avere nelle colonne di anteprima, ovvero il posizionamento del pulsante che sia perfettamente in riga con gli altri a prescindere dal testo che lo precede. Tutto questo sembrerà arabo ai non addetti ai lavori ma per chi lo fa di mestiere dovrebbe essere ben chiaro a cosa mi riferisco.
Per il principio già visto prima sull’ultima voce della lista andiamo a definire il pulsante con valore margin-top: auto; così che finisca esattamente nella direzione opposta. Avendo definito per il contenitore delle colonne il valore stretch e non avendo specificato un’altezza fissa queste, come già detto sopra, saranno sempre grandi quanto quella con più contenuto e di conseguenza il pulsante sarà sempre in linea alla fine delle stesse.
In figura sopra risolviamo poi al volo le incombenze per rendere il tutto completamente responsive, saremo poi noi a scegliere le risoluzioni delle media queries.
Nella prossima lezione andremo ad approfondire il grid system del metodo Flexbox così da poter avere maggiore dimestichezza e chiarezza nel suo utilizzo all’interno dei nostri siti web. Appuntamento al 20 Aprile.
