() translation by (you can also view the original English article)
In questo tutorial faremo pratica nello sviluppo di componenti web attraverso due esercizi: useremo Flexbox per creare i componenti "thumbnail list" e "sidebar"
Flex
Nel caso non ne siate ancora a conoscenza, "Flexbox layout" (Flexbox) è una funzionalità CSS che fornisce un metodo efficiente di disporre, allineare e sistemare oggetti in un determinato contenitore. In partnership con Grid e altre specifiche costituisce un più completo modulo di layout, in risposta a floats, tables e altri hacks che i web designers hanno utilizzato negli anni.
Tramite Flexbox gli oggetti possono essere disposti in ogni direzione e sono in grado di sistemare le proprie proporzioni, sia aumentandole per colmare spazio inutilizzato che contraendole per evitare di far eccedere il contenitore padre.
Esercizio 1: Componente Thumbnail List
Gli elenchi sono utilizzati per mostrare righe d'informazione, come ad esempio playlists, dettagli utente o film. Spesso questi elenchi contengono immagini che conosciamo come "thumbnails". Allineare immagini attraverso metodi tradizionali può risultare complicato e inconsistente, ma con Flexbox possiamo realizzare un elenco con un minimo di CSS.
Per questo componente useremo un elemento <ul> con degli elementi di lista <li>:
Useremo flexbox per creare il layout per il nostro .list-item, dando ad ognuno due elementi figlio diretti come mostrato di seguito:
Questa figura mostra come si comportano flex-shrink e flex-grow. L'elemento .list-item__image non si contrarrà mai, e .list-item__content occuperà lo spazio rimanente nel container li.
Questa sarà la struttura HTML per ognuno di essi:
1 |
<li class="list-item"> |
2 |
<div class="list-item__content"> |
3 |
<h4> Name Surname </h4> |
4 |
<p> Info </p> |
5 |
</div>
|
6 |
<div class="list-item__image"> |
7 |
<img src="images/image.png" alt="Image"> |
8 |
</div>
|
9 |
</li>
|
Il CSS di base sarà il seguente:
1 |
.list-item{ |
2 |
display: flex; |
3 |
}
|
4 |
.list-item__image{ |
5 |
flex-shrink: 0; |
6 |
}
|
7 |
.list .list-item__content{ |
8 |
flex-grow: 1; |
9 |
}
|
Di seguito cosa ci daranno gli stili di base:
Vedrete che gli avatars sono posizionati a sinistra, i dettagli a destra.
Abbiamo preso i dettagli utente da randomuser.me. Aggiungendo dello stile extra (contorni, border radius sulle immagini, tipografia elementare, colori di background etc.) otterremo questo:
Potete vedere il CSS completo su CodePen e modificarlo. Per esempio, se spostate .list-item__image dopo .list-item__content nell'HTML avrete un elenco thumbnail con immagini sul lato destro senza dover usare ulteriori classi o stili.
Esercizio 2: Componente Sidebar
Molti siti e applicazioni web utilizzano una sidebar per la navigazione. In questo esercizio creeremo un componente sidebar riutilizzabile attraverso Flexbox.
Il layout contiene tre parti principali:
- placeholder per logo
- navigazione
- sezione profilo utente
Tipicamente la parte complessa del creare questo genere di layout è collocare la sezione profilo in fondo alla sidebar.
Usare il Posizionamento
1 |
.sideabr{ |
2 |
position: relative; |
3 |
padding-bottom: 70px; |
4 |
}
|
5 |
.user-profile{ |
6 |
position: absolute; |
7 |
bottom: 0; |
8 |
}
|
Con questa soluzione "tradizionale", supponiamo che l'altezza del profilo utente sia 70px. Inseriremo 70px di padding in fondo alla sidebar in cui andremo a collocare la sezione. Cosa succede se a un certo punto ridisegneremo il box profilo in modo che l'altezza cambi? O decidiamo di collocarlo in alto? In questi casi dovremmo creare classi addizionali per la sidebar o modificare gli stili correnti e nessuno dei due casi è ideale.
The Flexbox Way
Con Flexbox possiamo risolvere sensibilmente questo problema. Useremo la stessa tecnica che abbiamo usato nel componente thumbnail, con una piccola differenza. Cambieremo la direzione da orizzontale a verticale tramite flex-direction: column;
La sezione alta e bassa del componente rimangono "non contraibili". L'elemento centrale .sidebar_nav occuperà il resto dello spazio grazie al suo flex-grow: 1;.
Quindi ecco il markup HTML:
1 |
<!--Sidebar Component-->
|
2 |
<div class="sidebar"> |
3 |
<div class="sidebar__logo"> |
4 |
<h3> Sidebar </h3> |
5 |
</div>
|
6 |
<ul class="sidebar__nav"> |
7 |
<li> Home </li> |
8 |
<li> About Me</li> |
9 |
<li> Portfolio</li> |
10 |
<li> Contact Me</li> |
11 |
</ul>
|
12 |
<div class="sidebar__profile"> |
13 |
<img src="images/profile.jpg" alt="Profile Photo"> |
14 |
<h4>Name Surname</h4> |
15 |
</div>
|
16 |
</div>
|
E i nostri stili di base:
1 |
.sidebar{ |
2 |
display: flex; |
3 |
flex-direction: column; |
4 |
height: 100%; |
5 |
}
|
6 |
.sidebar__logo h3{ ... } |
7 |
|
8 |
.sidebar__nav{ |
9 |
flex-grow: 1; |
10 |
list-style: none; |
11 |
padding: 0; |
12 |
}
|
13 |
|
14 |
.sidebar__profile{ ... } |
Ricapitolando, il componente .sidebar ha una proprietà flex-direction: column che trasformerà il flusso dei suoi elementi figlio da orizzontale a verticale.
.sidebar__nav ha la proprietà flex-grow: 1 che significa che occuperà tutto lo spazio disponibile nel container e spingerà il box .sidebar__profile in fondo alla sidebar.
Con questo approccio non dobbiamo preoccuparci dell'altezza del box profilo. Quindi, a cosa ci porta tutto ciò?
Questo è il risultato finale della sidebar con degli stili addizionali, incluso alcune icone prese da Fontawesome.
Conclusione
Flexbox ha realmente cambiato il modo in cui pensiamo il layout nel web, ed è felicemente supportato da tutti i browsers moderni. In questo tutorial abbiamo usato giusto alcune proprietà di Flexbox, ma ce ne sono molte altre come potete immaginare. Nel prossimo tutorial "Esercizi in Flexbox" svilupperemo ulteriori componenti intermedi, incontrando altre funzionalità di Flexbox lungo la strada.
