Menú básico flexbox
A continuación queremos crear un menú básico utilizando flexbox. Para que las cosas sean sencillas y claras, no voy a utilizar prefijos. Sin embargo en el <head> del documento hay una referencia hacia -prefix-free , una librería que trabaja "entre bastidores" añadiendo los prefijos necesarios para que el código  funcione correctamente.
El HTML utilizado no es nada especial: dentro de un elemento <nav> hay una lista no ordenada <ul>: el menú en sí.
En el CSS abordamos primero los estilos generales. Estos son también los estilos que darán formato al menú en los móviles. Nada complicado como ya lo puede ver.
/*primero en el móvil (mobile first)*/
nav {
padding: 1em;
font-family: font-family: Verdana, Geneva, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
background: #333;
}
nav li a {
color: white;
display: block;
text-decoration: none;
padding: .5em 1em;
}
nav li a:hover {
background: tomato;
color: white;
}
See the Pen flexbox menu #0 by Gabi (@enxaneta) on CodePen.
A continuación van los estilos para pantallas con una anchura más grande de 480px: @media screen and (min-width: 480px) y aquí finalmente utilizamos flexbox:
@media screen and (min-width: 480px) {
 nav ul {
   display: flex;
 }
}See the Pen flexbox menu #1 by Gabi (@enxaneta) on CodePen.
¡Y eso es todo! Pero – claro está – lo podemos mejorar.¿Como mejorarlo?
En el ejemplo anterior los elementos se han alineado a la izquierda porque en flexbox este es el estilo por defecto: justify-content: flex-start;. Si queremos que la alineación se haga a la derecha tenemos que añadir esta línea de código:
@media screen and (min-width: 480px) {
 nav ul {
   display: flex;
   justify-content: flex-end;
 }
}Lea más acerca de justify-content
See the Pen flexbox menu #2 by Gabi (@enxaneta) on CodePen.
Si por el contrario queremos que los elementos se agrupen en el centro tenemos que añadir esta otra línea de código:
@media screen and (min-width: 480px) {
 nav ul {
   display: flex;
   justify-content: center;
 }
} See the Pen flexbox menu #3 by Gabi (@enxaneta) on CodePen.
Y si queremos que los elementos aparezcan espaciados de forma uniforme podemos utilizar justify-content:space-around; o justify-content:space-between;
See the Pen flexbox menu #3 by Gabi (@enxaneta) on CodePen.
Hasta ahora las cosas han ido de maravilla, pero este último ejemplo tiene una cosa que no me gusta: al pasar con el ratón por encima de los elementos del menú podemos ver que hay un montón de espacio entre estos elementos. Para eliminarlo necesitamos estirar estos elementos y hacerlos que ocupen todo el espacio disponible. Y flexbox nos lo pone muy fácil.
El valor por defecto de flex-grow es cero (0), lo que quiere decir que el elemento no puede crecer. Si todos los ítems de una caja tienen el mismo valor, por ejemplo flex-grow:1; quiere decir que todos los ítems tienen que crecer en igual proporción, hasta ocupar todo el espacio disponible. Exactamente lo que necesitamos. Y para que las cosas queden todavía mejor utilizamos también text-align:center.
nav li{
   flex-grow:1;
   text-align:center;
 }Y como que los ítems ocupan todo el espacio disponible ya no necesitamos justify-content.
nav ul {
display: flex;
justify-content:space-around;
}See the Pen flexbox menu #5 by Gabi (@enxaneta) on CodePen.
Ahora al pasar con el ratón por encima del menú podemos ver que los elementos ocupan todo el espacio disponible. ¡Mucho mejor!
En todos estos ejemplos hemos tenido solo cuatro ítems en el menú. Pero que pasa si hay más elementos, tantos que ya no entran en una sola línea. Y esto puede pasar fácilmente en pantallas pequeñas.
En este caso necesitamos que los elementos puedan cambiar de línea y para esto añadimos esta otra regla:
flex-wrap: wrap;
nav ul {
display: flex;
flex-wrap:wrap;
}Por favor cambie el tamaño de la ventana para ver el cambio de línea.
See the Pen flexbox menu #6 by Gabi (@enxaneta) on CodePen.