Ejemplo de menú alineado con flexbox

Veamos un uso práctico de flexbox para alinear horizontalmente un menú construido con elementos li, modificando de forma sencilla su tamaño y espaciado.

Usamos la siguiente expresión emmet para generar el html del menú:


      nav.navegacion>ul.menu>(li.menu-item>a{Contenido $}[href=# title="Elemento de menu"])*5
    

Obteniendo este código:


      <nav class="navegacion">
        <ul class="menu">
          <li class="menu-item"><a href="#" title="Elemento de menu">Contenido 1</a></li>
          <li class="menu-item"><a href="#" title="Elemento de menu">Contenido 2</a></li>
          <li class="menu-item"><a href="#" title="Elemento de menu">Contenido 3</a></li>
          <li class="menu-item"><a href="#" title="Elemento de menu">Contenido 4</a></li>
          <li class="menu-item"><a href="#" title="Elemento de menu">Contenido 5</a></li>
        </ul>
      </nav>
    

Ejemplo práctico. Código y explicación

Para formatearlo usamos las siguientes clases CSS:


        .menu {
          display: flex;
          background-color: rgba(0,0,0,.7);
          justify-content: space-between;
          border: 5px solid dimgray;
        }
        .menu-item {
          width: 19.5%;
          list-style: none;
          background-color: dimgray;
          border: 1px solid whitesmoke;
          height: 60px;
          }
        .menu-item a {
          text-decoration: none;
          color: whitesmoke;
          font-weight: bold;
          text-align: center;
          display: block;
          padding: 5px 0;
        }
        

Alineación

El trabajo de alineación se realiza desde el contenedor de los elementos li, en este caso la etiqueta ul con la clase menu. Y solamente con las propiedades display: flex y justify-content: space-between conseguimos la alineación.

Veamos como cambia la distribución modificando únicamente esa propiedad para el contenedor flex. Ajusta su propiedad desde el desplegable:

Dirección

Ocurre lo mismo si cambiamos la dirección del eje flex. Usando la orientación vertical, y asignando una altura al elemento que sea mayor que la suma de las alturas de los botones (para tener espacio sobrante y ver las diferencias entre los valores) obtenemos una presentación muy distinta:

Al pulsar el botón añadimos a la clase menu las propiedades flex-direction: column; height: 360px; y si volvemos a pulsar se las quitamos

Contenido flex que actúa también como contenedor flex

Los elementos li del menú pueden ser contenedores de tipo flex al mismo tiempo que son contenido flex dentro de su contenedor principal. Son dos comportamientos perfectamente compatibles, puesto que cada uno se ocupa de cosas diferentes. Como elemento flex, cada li se distribuye y alinea en su contenedor según lo que especifiquemos en ese contenedor ul. Y al mismo tiempo, si aplicamos la propiedad display: flex; sobre los elementos li haremos que el contenido de cada uno de ellos, en este caso los elementos a, sean flexibles y puedan ser organizados dentro del li según las propiedades flex. En este caso vamos usar esta propiedad para alinear el texto de los enlaces sobre el eje vertical de cada elemento.

Al pulsar el botón le añadimos o quitamos (si ya las tiene) las siguientes propiedades a los elementos li del menú: display: flex; align-items: center; justify-content: center;