Una delle caratteristiche più utili e potenti del flexbox è il modo in cui in tale contesto vengono gestiti i margini automatici. Per intenderci, quelli assegnati con il valore auto, come in margin-top: auto.
Assegnando un margine automatico ad un elemento inserito in un contenitore flessibile, viene assorbito tutto lo spazio disponibile e l'elemento viene allineato sul lato opposto rispetto a quello designato con la proprietà margin. Molto più facile far parlare un esempio.
Nella demo 5 abbiamo inserito nella nav un campo per la ricerca sul sito. è stato collocato sul lato opposto rispetto al menu, secondo un pattern di design molto comune. Inizialmente abbiamo così definito a livello HTML il nostro modulo:
<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>
</ul>
<form class="modulo-ricerca">
<input type="text" placeholder="Cerca" class="campo-ricerca">
</form>
</nav>Nel contesto del nostro layout va a collocarsi a questo punto così:
Nulla di strano: il form è un elemento blocco e come tale si colloca automaticamente su una nuova riga.
Per allinearlo accanto al menu dovremo agire sull'elemento che contiene entrambi, ovvero l'elemento nav.main-nav. Basta dichiarare una sola regola:
.main-nav {
display: flex;
display: -webkit-flex;
}E dato che di default gli elementi flessibili si collocano su una riga otteniamo questo risultato:
Manca ancora un passo: allineare il modulo a destra. Facile. Come si accennava, basta usare la proprietà di margine opposta al lato su cui vogliamo allineare e dare il valore auto. Volendo allineare a destra useremo:
.modulo-ricerca {
margin-left: auto;
}Fatto. Il modulo sarà sempre ancorato alla parte destra del suo contenitore. Vedremo più avanti come questa funzionalità legata a margin: auto possa essere di grande efficacia in altri contesti.
