Il caso della centratura dimostra come in tanti scenari possiamo manipolare come desideriamo elementi flessibili intervenendo solo sul loro contenitore. Un altro esempio tipico è rappresentato da menu di navigazione orizzontali basati su liste.
Tipicamente per questa operazione si procede in questo modo:
- si prepara la lista eliminando il marcatore e resettando margini e padding;
- si usa la proprietà
float
o la dichiarazionedisplay: inline-block
per sistemare gli item di lista l'uno accanto all'altro orizzontalmente; - si formattano le voci del menu impostando larghezza, margini, padding, colori.
Con flexbox gli step necessari rimangono 3, ma il secondo passaggio non prevede l'adozione di float
o inline-block
. Vediamo come.
Nella seconda demo siamo partiti da questa struttura HTML, un elemento nav
con all'interno una lista ul
:
<nav class="main-nav">
<ul class="main-menu">
<li class="menu-item"><a class="menu-link" href="#">home</a></li>
<li class="menu-item"><a class="menu-link" href="#">italia</a></li>
<li class="menu-item"><a class="menu-link" href="#">mondo</a></li>
<li class="menu-item"><a class="menu-link" href="#">politica</a></li>
<li class="menu-item"><a class="menu-link" href="#">economia</a></li>
<li class="menu-item"><a class="menu-link" href="#">tecnologia</a></li>
<li class="menu-item"><a class="menu-link" href="#">cultura</a></li>
<li class="menu-item"><a class="menu-link" href="#">sport</a></li>
<li class="menu-item"><a class="menu-link" href="#">motori</a></li>
</ul>
</nav>
Una volta azzerata la lista, senza flexbox otteniamo questo:
Agiamo quindi sul box contenitore, la lista con classe .main-menu
:
.main-menu {
display: flex;
display: -webkit-flex;
}
Abbiamo già fatto più di metà dell'opera, gli item sono ora disposti orizzontalmente, uno accanto all'altro, senza float e simili:
Non ci rimane che agire sui link contenuti nei li
per dare l'aspetto visuale che desideriamo:
.menu-link {
font-weight: bold;
color: #fff;
display: block;
padding: 10px;
}
.menu-link:hover {
background-color: #51caf3;
color: #fff;
}
Ancora una volta è bastato agire sull'elemento contenitore. Ed è bastato fare ricorso solo a display: flex
, senza specificare ulteriori proprietà del flexbox. In realtà è come se avessimo scritto:
.main-menu {
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
}
Gli item si collocano infatti su una riga (row), in orizzontale. Ma flex-direction: row
è il valore di default per i box flessibili, e pertanto la dichiarazione si può omettere.
Varianti: disposizione delle voci del menu
La seconda demo contiene, oltre al menu nella sua configurazione di base, 4 varianti. Per ciascuna di esse abbiamo modificato la proprietà justify-content
usando tutti i suoi possibili valori, ovvero (dall'alto in basso):
flex-end
;center
;space-between
;space-around
.
Nel primo menu il valore è quello di default, flex-start
, che allinea gli elementi all'inizio della riga.
/* Stili navigazione varianti */
.end {
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
.center {
justify-content: center;
-webkit-justify-content: center;
}
.between {
justify-content: space-between;
-webkit-justify-content: space-between;
}
.around {
justify-content: space-around;
-webkit-justify-content: space-around;
}