FlexBox è uno tra i più interessanti moduli recentemente introdotti all’interno del CSS, ne parliamo da diverso tempo ma la cosa più interessante è che permette di creare dei layout flessibili in pochissimo tempo e che sono compatibili con la maggior parte dei browser.
Queste sono tutte belle notizie, ma fin troppo spesso servono delle nozioni aggiuntive per poter avere la completa padronanza di uno strumento o, come in questo caso, di una nuova tecnologia.
All’interno del corso che abbiamo appositamente creato vengono spiegati per filo e per segno qualsiasi proprietà di questo nuovo modulo e soprattutto vengono introdotti i concetti base che con i video integrati mostrano immediatamente il loro comportamento.
Molto spesso questo non basta anche se sei un bravo sviluppatore, quando si apprende qualcosa di nuovo c’è la necessità di dover vedere dal vivo come questo si comporta all’interno di ambienti reali, o per meglio dire all’interno dei browser.
Ecco perché ho voluto scrivere questo articolo, all’interno di questo ti parlerò di alcune soluzioni che ti permetteranno di vedere in pratica come FlexBox può esserci di aiuto nella creazione di determinate layout. La mia intenzione non è quella di confrontarlo con la vecchia scuola dove, con i float, potevamo far galleggiare a destra o sinistra i nostri elementi e pulire tutto con un bel clear.
Quello che voglio fare è mettere in luce le caratteristiche utili di questo nuovo modulo e permetterti di comprenderle al meglio.
Al giorno d’oggi sarai abituato a posizionare i tuoi elementi con i float, un display: inline-block oppure e più assurdo il display: table che permette di trasformare qualsiasi elemento in una tabella e poter sfruttare la grande esperienza che qualsiasi browser ha con questo tipo di elemento.
Usare display: table è sbagliato perché ci fa tornare negli anni ’90 dove il layout dei siti web veniva definito con le tabelle.
Ebbene, siamo nel 2016, ed è giunto il momento di iniziare a sviluppare con tecnologie moderne che sono state create e pensate per rispondere alle necessità che abbiamo oggi. Lo scopo di questo articolo non è quello di introdurti alle proprietà in grado di utilizzare FlexBox nelle tue pagine, oggi andiamo a vedere alcuni casi interessanti di questo modulo, ma se hai bisogno di un piccolo ripasso ti lascio qua sotto la registrazione di un nostro precedente webinar.
Ora che ti ho inserito il video mi sento più tranquillo e posso iniziare a parlare di qualcosa di più specifico come i tipi di layout che possiamo creare con FlexBox. La mia intenzione non è tanto quella di dire che puoi creare dei layout che prima non potevi perché, anche se in parte è vero, la cosa più ovvia è riuscire a riprodurre alcuni dei layout che prima erano complicati da realizzare.
Leggendo questo interessante articolo sono venuti fuori diversi tipi di layout che possiamo creare facilmente con questo nuovo modulo, andiamo a scoprirli assieme.
Layout a “carte” reinventati in FlexBox
Dopo l’avvento del Material Design uno degli aspetti che sono venuti più alla luce è proprio l’organizzazione delle informazioni in carte. Questa immagine è stata presa dalle pagine di WordPress.com dove elenca i temi disponibili, rende l’idea in modo incredibile.
Ogni elemento viene posizionato all’interno di una sua colonna e indipendentemente dalla sua altezza questo rispetta i margini impostati con l’elemento precedente.
Benché FlexBox non sia nato per fare questo tipo di attività e che risulta chiaro che la proprietà CSS column è in grado di ottenere lo stesso risultato in modo ancor più semplice, questo non ci deve assolutamente fermare visto che il modulo column non ha ancora un ampio supporto come invece quello che stiamo discutendo.
Facciamo quindi un veloce esempio e diciamo che il seguente è il codice HTML che abbiamo a disposizione per sviluppare il nostro layout:
<section class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div> <div class="flex-item">7</div> <div class="flex-item">8</div> </section>
Un semplicissimo <section> contenente al suo interno diversi, niente di speciale, quello che spero che troverai speciale è il seguente codice CSS:
.flex-container {
display: flex;
flex-flow: column nowrap; /* scorciatoia flex-direction e flex-wrap */
align-content: center;
height: auto;
}
.flex-item {
flex: 0 0 auto; /* scorciatoia flex-grow flex-shrink flex-basis */
width: 100%;
margin: .25em;
padding: .5em;
}
@media screen and (min-width: 40.5em) {
.flex-container {
flex-flow: column wrap; /* attivo le colonne */
height: 58em;
}
.flex-item { width: 50%; /* 2 col */ }
}
@media screen and (min-width: 60.5em) {
.flex-container { height: 43em; }
.flex-item { width: 33.333%; /* 3 col */ }
}Il fatto di aver utilizzato nella prima dichiarazione di .flex-conatiner il valore nowrap indica che questo CSS è stato sviluppato con la logica mobile first e che quindi non permette al layout di mostrarsi su più colonne se lo schermo non è più grande di una certa dimensione, che nel nostro caso è un min-width: 40.5em.
Raggiunta infatti la prima media query ti sarà possibile attivare il valore wrap e fare in modo che gli elementi si dispingono uno sotto l’altro su due colonne.
Split Screen facili facili con FlexBox
Gli split screen sono un ottimo modo per presentare al nostro visitatore una scelta da prendere. In quest’immagine si capisce chiaramente che l’autore del sito è un designer che non si perde in chiacchiere.
Se vai a visitare la pagina dal vivo si nota che con estrema semplicità questo layout a 2 colonne permette di mantenere fissa l’immagine sulla sinistra mentre la sua parte destra è scrollabile e va ad attivare i punti che fungono da navigazione.
L’effetto è molto interessante e spesso viene usato anche da grandi aziende dove l’intenzione di mettere l’utente di fronte a una scelta è ancora più evidente. Personalmente ritengo questo layout molto interessante per diversi motivi.
Per prima cosa non siamo più invogliati a utilizzare i classici slider che, personalmente, non uso più già da diverso tempo. Sicuramente questo è un argomento che si merita un articolo a parte ma per il momento diciamo soltanto che con gli slider, che prima venivano utilizzati per presentare più informazioni, al giorno d’oggi non fanno altro che appesantire il sito sul quale ci troviamo e gli utenti non hanno più la pazienza di stare ad aspettare lo scorrimento delle singole slide.
Un layout di questo genere permette, invece, di porre l’attenzione su quale dei due elementi il cliente si deve concentrare e inoltre offre una presentazione molto interessante. Ma vediamo adesso come sia possibile realizzare questo con FlexBox senza dover ricorrere a posizionamenti assoluti o a librerie JavaScript che non fanno altro che aumentare la complessità del progetto.
Venendo all’atto pratico di questo esempio realizzare un layout del genere con Flexbox è un gioco da ragazzi, se vuoi scoprire il codice non devi far altro che visualizzarlo all’interno del Pen che ho incluso qua sopra dove potrai scoprire tutto il codice HTML e CSS che ho utilizzato per questo esperimento.
La cosa principale da capire è che se sei interessato a creare un layout del genere non devi far altro che inserire il display: flex; all’interno dell’elemento contenitore e impostare la flex-direction a row, ovvero il suo valore iniziale, e il gioco è fatto.
.flex-split {
flex-direction: row;
}
.flex-split > div {
justify-content: center;
text-align: center;
width: 50%;
}Nell’esempio collegato ho utilizzato il valore 100vh che come abbiamo già spiegato mi permette di tenere conto delle dimensioni del viewport per creare un elemento alto quanto lo schermo che dovrà mostrarlo, in questo modo posso andare a occupare l’intera altezza senza troppo sforzo o l’utilizzo di librerie JavaScript.
Layout “bloccati” con Flexbox
Quello che in inglese prende il nome di pinned layout in italiano si può tradurre in bloccato e non fa riferimento all’impossibilità di adattare un layout alla grandezza dello schermo ma piuttosto al modo in cui i vari elementi giocano un ruolo importante nella realizzazione del layout stesso.
Prendiamo per esempio l’immagine precedente dove c’è un iPhone e un iMac che occupano i due lati dello schermo. Dato che stiamo analizzando una singola immagine può risultare non intuitivo, ma gli estremi ai quali sono attaccate queste due immagini sono gli stessi bordi del browser, cosa ancor più interessante è trovare un titolo che collega le due estremità.
Questi tre elementi occupano la stessa linea orizzontale e sopratutto sono responsive, ovvero i due device si adattano alla grandezza della finestra condividendo lo spazio disponibile con il titolo.
Il layout originale dal quale ho preso questa immagine è sviluppato utilizzando la proprietà position e i valori relative e absolute, ma questo non ci spinge a conoscere ulteriormente le proprietà messe a disposizione da FlexBox e soprattutto ci obbliga a lavorare con strutture di vecchio tipo che tra l’altro ci obbligano anche a mantenere il titolo in mezzo alle due immagini andando a colpire anche la semantica del nostro lavoro.
<div class="layout-flex"> <h2 class="stretch-title">looks great from here to there</h2> <div class="stretch-photo small"><img src="img/flexbox_stretch_small.png" alt="mobile" /></div> <div class="stretch-photo big"><img src="img/flexbox_stretch_big.png" alt="desktop" /></div> </div>
Con la proprietà order che ci mette a disposizione questo nuovo modulo possiamo invece inserire il titolo come primo elemento e spostarlo successivamente nel mezzo per dare vita al nostro effetto.
.layout-flex {
display: flex;
align-items: flex-end;
}
.layout-flex .small { order: -1; }Ecco che in questo modo abbiamo iniziato a dare ordine al nostro layout, ma c’è ancora una piccola cosa da fare; ovvero dobbiamo fare in modo che il titolo si espanda per tutta la larghezza che avanza alle immagini, ecco come risolvere con una semplice dichiarazione:
.layout-flex .stretch-title {
flex: 1;
margin-bottom: 4.5rem;
border-bottom: 1px solid #ccc;
}Questo è il codice di base che ti permetterà di distanziare i tuoi elementi e inserire il titolo al centro delle immagini con un bel border che ti permetterà di marcare la connessione tra essi. Nota che, sempre per il titolo, abbiamo utilizzato anche la proprietà flex: 1; che ci permette di mantenere le dimensioni delle due immagini laterali e di estendere soltanto questo elemento.
Un altro effetto rimile è raggiungibile utilizzando justify-content con il valore space-between, ma come ti spiego all’interno del corso non è sempre una cosa intuitiva dato che devi tener conto anche della direzione dell’asse principale e secondario.
Conclusioni
Ci sono moltissimi altri layout che possiamo realizzare con questo modulo, onestamente spero di averti incuriosito e invogliato a condividere con noi anche i tuoi layout perché in questo modo possiamo imparare e crescere dal codice dell’altro.
Probabilmente tornerò a parlare di Flexbox ma vorrei anche sapere da te che cosa ti interessa maggiormente nello sviluppo front-end.
Ci sono un sacco di cose che vogliamo approfondire come lo sviluppo di applicazioni mobile e desktop con l’uso di tecnologie web, la creazione di videogiochi, la programmazione 3D con WebGL e three.js… Insomma il web sta facendo passi da gigante ed è difficile poter tenere il passo pubblicando singoli articoli.
Come ti ho anticipato con il corso Flexbox, su SkillsAndMore realizziamo interi percorsi di formazione che ti permetteranno di approfondire un determinato aspetto dello sviluppo web e mobile. Hai delle necessità particolari? Non vedi ancora il corso di cui hai bisogno per avanzare nella tua carriera?
Lascia il tuo commento con le tue opinioni, i tuoi dubbi o i consigli; sono tutte informazioni di cui abbiamo bisogno e che apprezziamo moltissimo 😀
Lascia un commento