Allineare elementi flessibili con i margini automatici

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.