Primero que todo debemos entender que flexbox es un sistema unidimensional , ¿pero que carajo significa esto?, esto quiere decir que solo podemos contar con una dimension de solo filas o solo columnas, que determina esto... el buen flex-direction , este determina con que dimension trabajaremos , el valor por defecto es row (fila) , pero podemos ademas contar o definir row-reverse | column | column-reverse .
Esto cosilla es el que hace en gran medida la magia , nos da la opción de envolver el contenido , por defecto viene con el valor de nowrap , pero podemos contar con wrap y wrap-reverse . Wrap envuelve el contenido de los elementos hijos de nuestros flex container.
Esto lo podriamos definir como el flujo que tendra la caja
Valor que acepta
Default: flex-start o alineacion a la izquierda.
Center.
Flex-end o alineacion a la derecha
Space-between:Reparte el espacio de los hijos sin considerar las orillas
Space-around:Reparte el espacio de los hijos considerara las orillas
Space-evenly:Reparte el espacio de los hijos considerando las orillas de igual forma
- Define la alineación en el eje principal y ¿Quien carajo define esto?, si cabeza de pollo el buen Flex-direction
- Esto aplicara respecto el espacio sobrante del elemento padre
Column = alineacion sobre Y
Row = alineacion sobre X