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;