Duda con flexbox

[monicapo]

Estoy poniéndome al día con CSS y estoy haciendo mi navbar con flexbox, a ver que tal.

El caso es que quiero items en el contenedor flexbox, pero no distribuidos de forma uniforme, si no que unos elementos estén a la izquierda, pero el último que esté a la derecha del todo, dejando espacio vacío desde el anteúltimo de la izquierda al último (a la derecha).

Así:
ITEM1 ITEM2 ITEM3 --------------------------------------------------- ITEM4

He estado leyendo por encima varios cheatsheet de flexbox, pero ninguno resuelve mi problema. O se alinean a la derecha o a la izquiera o al centro, pero todos de golpe.

¿Alguien sabe si se puede?

[Rafael]

Flex box para este caso no creo que sea necesario. Yo pondría un display: inline-block.

El flexbox lo uso para cuando un elemento puede variar su alto dependiendo del tamaño de la ventana, lo cual no sucede verticalmente en un menú.

Por lo tanto es fácil alinear a la izquierda todo, que será su alineación natural y ponerle por ejemplo un float: right al elemento de la derecha.

También podrías poner un position: absolute y ponerle un right: 0;

[alivan]

Para alinear elementos con flexbox puedes usar la propiedad margin. Si defines el margin-left del item 4 como auto, el elemento aplicará el margen necesario para alinearse a la derecha, consiguiendo posicionar el elemento de la forma que necesitas.

Puedes probarlo con este código:

Código HTML:

<nav>
  <a href="#">Frutas</a>
  <a href="#">Verduras</a>
  <a href="#">Carne</a>
  <a href="#">Pastelería</a>
  <a href="#">Perfil</a>
</nav>
 

Código CSS:

nav {
  display: flex;
}
 
nav a:last-child {
  margin-left: auto;
}