Puedes cambiar este comportamiento utilizando justify-content para cambiar la alineación horizontal y align-items para cambiar la alineación vertical.
justify-content tiene 5 valores posibles:
– flex-start: alinea al lado izquierdo del contenedor.
– flex-end: alinea al lado derecho del contenedor.
– center: alinea en el centro del contenedor.
– space-between: muestra con un espacio igual entre ellos.
– space-around: muestra con un espacio igual alrededor de ellos.
Alineación horizontal
Cambiar la alineación vertical
align-items tiene 5 valores posibles:
– flex-start: alinea en la parte superior del contenedor.
– flex-end: alinea en la parte inferior del contenedor.
– center: alinea en el centro vertical del contenedor.
– baseline: muestra en la línea base del contenedor.
– stretch: los elementos se estiran para ajustarse al contenedor.
Alineación vertical
Una nota sobre la línea base
baseline se ve similar a flex-start en este ejemplo, debido a que mis cajas son demasiado simples. Echa un vistazo a este Codepen para tener un ejemplo más útil, que he bifurcado de un Pen creado originalmente por Martin Michálek. Como puedes ver allí, las dimensiones de los elementos están alineadas.
