1. Ejes en Flexbox y funcionamiento

Representación de los ejes en flex

Flexbox es un modelo de layout que relaciona padre con hijos, siempre se necesita de un padre para poder aplicar flex.

En el gráfico anterior, la linea gris exterior es el contenedor o padre (flex container). Las cajas interiores que contienen un 1 y un 2 son los hijos (flex item).

Cuando a un elemento se le aplica display:flex, automáticamente sus hijos se convierten en flex items

Las lineas rojas del gráfico representan los ejes. Un elemento flex tiene dos ejes X (main axis) e Y (Cross axis). De manera predeterminada el eje principal es el horizontal y el eje vertical el secundario. Ademas de tener una dirección horizontal o vertical, también tienen un punto de inicio o sentido (circulo rojo de las lineas). De manera predeterminada main axis va de izquierda a derecha y cross axis de arriba a abajo

Ejemplo 1

En este ejemplo creamos un container flex con dos hijos (1 y 2) con el class flex-item

1
2

Por defecto al hacer flex, el elemento padre ocupa el 100% del contenido (a no ser que se ponga inline-flex), los items se colocan también por defecto uno al lado del otro.

Ejemplo 2

Al poner en el contenedor flex-direction:column los items pasan a ocupar el 100% del contenedor ya que modificamos el eje del main axis o eje principal (X).

1
2

Al poner el eje X como columna lo que hacemos es lo como si girásemos el contenedor 90º y por eso ocupa el 100% del contenido

1
2

Ejemplo 3

Al igual que podemos cambiar el comportamiento del eje X con flex-direction:column también podemos cambiar el orden de dicho eje tanto en row como en column poniéndolo al revés

1
2

flex-direction: row-reverse

1
2

flex-direction:column-reverse