Mobile, menu e item flessibili

Quanto visto finora potrebbe bastare per dimostrare come con appena un paio di semplici regole si possa impostare a piacimento la disposizione degli item del menu nel contesto del suo contenitore. Ma non è tutto. Possiamo infatti intervenire, invece che sull'allineamento ottenibile con justify-content, sul modo in cui i list item occupano lo spazio disponibile. In questo caso lavoreremo direttamente sugli elementi flex.

Varianti: item flessibili

Nella demo 3 partiamo sempre con il nostro menu di base, il primo dall'alto, identico a quello della demo 2. Nella prima variante, il menu centrale, abbiamo assegnato tramite la classe menu-item-equal questo valore alla proprietà flex:

<ul class="main-menu">
 <li class="menu-item menu-item-equal"><a class="menu-link" href="#">home</a></li>
 [...]
</ul>

.menu-item-equal {
	flex: 1;
	-webkit-flex: 1;
}

Come va interpretato? E cosa si ottiene adoperandolo? Partiamo col ricordare che flex è una proprietà a sintassi abbreviata con cui si dichiarano con una sola regola tre diverse proprietà:

• flex-grow;
• flex-shrink;
• flex-basis.

Si tratta della parte più complessa e potente della specifica, perché con queste proprietà possiamo avere il massimo controllo sul modo in cui gli elementi flessibili occupano lo spazio disponibile all'interno del loro contenitore.

Campo	Descrizione
flex-grow	consente di impostare il fattore di ingrandimento di un box rispetto agli altri presenti nel contenitore quando si distribuisce lo spazio disponibile
flex-shrink	è la proprietà opposta rispetto a flex-grow, dal momento che agisce sul fattore di restringimento relativo tra i box
flex-basis	consente di specificare la dimensione principale iniziale di un box; è una sorta di larghezza minima come potrebbe essere impostata con la proprietà min-width

Nella pratica, specificare, come abbiamo fatto, flex: 1 corrisponde a flex: 1 1 0, ovvero:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

Se la dimensione di base (flex-basis) è uguale a 0 e ciascun elemento flessibile ha un fattore di ingrandimento (flex-grow) pari a 1 otteniamo che ciascun item occuperà automaticamente nel suo contenitore lo stesso spazio. Tutto ciò può essere rappresentato con una formula:

spazio disponibile = dimensione del contenitore - somma delle flex-basis

Nel nostro caso:

dimensione del contenitore (1000px) - 0 = spazio disponibile (1000px)

Se il fattore di ingrandimento è uguale per tutti gli item, ogni item occuperà la stessa larghezza. Potete verificare misurando con il Web Inspector la larghezza di ogni voce del secondo menu. La formula è questa:

larghezza item = dimensione di base + ((spazio disponibile/somma dei flex-grow) * fattore di grow individuale)

Quindi:

0 + ((1000/9) * 1) = 111,111

Questa soluzione è perfetta nel caso di menu orizzontali in cui non si conosca in partenza il numero di item e in cui dunque non è consigliabile partire da larghezze fisse (ma non aiuta nemmeno ricorrere alle percentuali). Cosa succede infatti se a un certo punto è necessario aggiungere una nuova voce? Agendo come abbiamo fatto e grazie al flexbox questo non è più un problema. Se si inserisce un nuovo elemento lo spazio disponibile verrà ricalcolato e riallocato senza 'rompere' il menu perché tutto è perfettamente proporzionale. Flexbox è nato per risolvere queste situazioni.

Simile ma non identica è la soluzione adottata nel terzo menu. Qui abbiamo impostato così la proprietà flex:

.menu-item-prop {
 flex: 1 1 auto;
 -webkit-flex: 1 1 auto;
}

In questo caso, con flex-basis: auto, ciascun item avrà una larghezza proporzionale calcolata sulla base del suo contenuto. Ecco perché, se verificate, noterete che la larghezza dell'item 'Economia' è maggiore di 'Sport'. Anche in questo caso, comunque, si guadagna in flessibilità e efficacia nella gestione del menu nel caso in cui si tolgano o aggiungano nuovi elementi.

Adattare il menu per il mobile

In questo e in tutti gli scenari d'uso che affronteremo, flexbox si rivela perfettamente adeguato in strategie di adattamento dei contenuti e del layout al mobile.

Non possiamo ovviamente esaurire in questo spazio tutte le condizioni, sarà infatti necessario valutare di volta in volta quali sono le necessità imposte dalle specifiche del progetto. L'esempio che stiamo per esaminare può essere comunque un buon modello per situazioni analoghe.

Se volessimo adattare il menu al mobile, ci troveremmo nella situazione di dover passare ad un menu verticale in coincidenza di un breakpoint fissato in una media query. Nella demo 4 abbiamo operato così:

/* Mobile  */
@media all and (max-width: 700px) {
 .main-menu {
  flex-direction: column;
  -webkit-flex-direction: column;
  }
}

Nulla di più facile. Per passare da una disposizione orizzontale ad una verticale è sufficiente impostare la proprietà flex-direction su column modificando il valore di partenza e di default che è row.