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.
Ancora nessun commento