Ente accreditato Regione Veneto n.4271

Flexbox, elementi fullsize responsive [Lezione 6]

Gestire posizionamento, ordinamento e dinamiche dei nostri elementi a pieno schermo

Pubblicato da Simone Baldassin // 28 aprile 2017 // 295 visualizzazioni

Gestire posizionamento, ordinamento e dinamiche dei nostri elementi a pieno schermo

Siamo arrivati all’ultimo tutorial dedicato a Flexbox e vedremo una dinamica che abbiamo già parzialmente accennato nella prima lezione, ovvero come gestire l’ordinamento degli elementi nei dispositivi partendo da una struttura diffusissima nei layout di nuova generazione e che siamo soliti inserire con display: table;.

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

Lezione 6: elementi fullsize responsive

Molto spesso ci ritroviamo a definire elementi di 2 colonne che occuperanno ognuna il 50% dello spazio disponibile a prescindere dalle dimensioni del monitor come possiamo vedere nella prima figura.

#Flexbox, elementi fullsize responsive. Lezione 6 Click to Tweet

Order

Il modo più semplice per soddisfare questo tipo di layout è, come già detto, l’utilizzo del valore table per l’attributo display, come spiegato in questo articolo di qualche tempo fa che di fatto trasforma tutti gli elementi all’interno del contenitore table in table-cell.

Anche il metodo flexbox ci mette a disposizione una soluzione semplice e performante per questa tipologia di situazione; andiamo subito a creare un nuovo foglio di lavoro con una struttura suddivisa in 2 contenitori che chiameremo flex-container che contengano al loro interno altrettanti div che chiameremo con più classi.

Order

Tenendo come riferimento la figura uno vediamo che useremo la class: box per la formattazione generale dei div, la class blu per gestire gli elementi vuoti (il primo e il quarto div) e le classi numerate per poter poi definire l’attributo order nella visualizzazione degli stessi sui dispositivi mobili.

Approfittiamo di questo ultimo esercizio anche per fare un piccolo ripasso; guardiamo il foglio di stile, dovremmo già sapere cosa stiamo facendo:

Order

Trasformiamo il contenitore in display: flex per definire la riga e assegnamo le oramai note regole al box:

  • display: flex;
  • flex-direction: column;
  • justify-content: center;
  • align-items: center;

Niente che non abbiamo già visto negli step precedenti.

Se confrontiamo questo esercizio con quello sul table display vedremo subito quanto entrambe le situazioni siano ottimali anche se , a oggi, è forse preferibile l’utilizzo della prima seppure questa nello specifico risulta più flessibile e di facile interpretazione.

Possiamo apprezzarne maggiormente la flessibilità nella gestione per i dispositivi come vediamo nella figura 4. Una semplice riscrittura di flex-container del parametro direction da row a column ci permette di portare tutti gli elementi uno sotto l’altro.

Sfruttiamo a questo punto le classi numeriche e l’attributo order per definire l’ordine sequenziale di visualizzazione dei 4 div.

Order

Non ci rimane che abbassare la risoluzione dei nostri browser e verificare noi stessi il risultato.

Order

E con questo ultimo tutorial si chiude (per ora) la nostra avventura nel mondo flexbox. Proviamo a adesso a mettere in pratica le nozioni acquisite, vi invitiamo perciò a creare un modello onepage sfruttando attributi e elementi visti durante queste settimane.

Inviateci i vostri lavori e i migliori saranno pubblicati su un prossimo articolo del nostro blog e nei nostri profili social.

Ringraziandovi come sempre per averci seguito vi diamo appuntamento a una prossima serie di lezioni su argomento su cui, per il momento, manteniamo il segreto.

Stay tuned.

Topic: , ,

Send this to a friend