Se trata de alineación con flexbox, únicamente escribiendo clases. Aquí https://codepen.io/Fabricio93/pen/qBBZmjR?editors=1100.

Básicamente escribes "flex- " al contenedor padre y luego donde quieres colocar los elementos, primero el eje X y luego el Y.

Por ejemplo, "flex-left-top" colocaría los elementos arriba y a la izquierda.

Luego para cuando es "flex-direction: column," las clases comienzan con "column- " , un ejemplo sería "column-center-bottom", estaría centrado abajo.

Visualmente siempre escribes el eje X y luego el Y, me pareció más fácil así ya que me generaba cierta confusión cuando cambiaba el eje principal.

Después quedan las clases, flex-space-a, flex-space-b y flex-space-e, vienen de space-around , space-between y space-evenly. Se pueden combinar con las otras.

Aquí un ejemplo:

Los elementos estarían centrados en ambos ejes con un space-between.

Sería eso, me gustaría saber que les pareció y si hay algún error. Hay que pulir algunas cosas pero voy despacio.

Se trata de alineación con flexbox, únicamente escribiendo clases. Aquí https://codepen.io/Fabricio93/pen/qBBZmjR?editors=1100.

Básicamente escribes "flex- " al contenedor padre y luego donde quieres colocar los elementos, primero el eje X y luego el Y.

Por ejemplo, "flex-left-top" colocaría los elementos arriba y a la izquierda.

Luego para cuando es "flex-direction: column," las clases comienzan con "column- " , un ejemplo sería "column-center-bottom", estaría centrado abajo.

Visualmente siempre escribes el eje X y luego el Y, me pareció más fácil así ya que me generaba cierta confusión cuando cambiaba el eje principal.

Después quedan las clases, flex-space-a, flex-space-b y flex-space-e, vienen de space-around , space-between y space-evenly. Se pueden combinar con las otras.

Aquí un ejemplo:

Los elementos estarían centrados en ambos ejes con un space-between.

Sería eso, me gustaría saber que les pareció y si hay algún error. Hay que pulir algunas cosas pero voy despacio.

Se trata de alineación con flexbox, únicamente escribiendo clases. Aquí https://codepen.io/Fabricio93/pen/qBBZmjR?editors=1100.

Básicamente escribes "flex- " al contenedor padre y luego donde quieres colocar los elementos, primero el eje X y luego el Y.

Por ejemplo, "flex-left-top" colocaría los elementos arriba y a la izquierda.

Luego para cuando es "flex-direction: column," las clases comienzan con "column- " , un ejemplo sería "column-center-bottom", estaría centrado abajo.

Visualmente siempre escribes el eje X y luego el Y, me pareció más fácil así ya que me generaba cierta confusión cuando cambiaba el eje principal.

Después quedan las clases, flex-space-a, flex-space-b y flex-space-e, vienen de space-around , space-between y space-evenly. Se pueden combinar con las otras.

Aquí un ejemplo:

Los elementos estarían centrados en ambos ejes con un space-between.

Sería eso, me gustaría saber que les pareció y si hay algún error. Hay que pulir algunas cosas pero voy despacio.