FLEX-DIRECTION

Para cambiar la forma de main axis por cross axis lo realizamos con la propiedad flex-direction. Esta propiedad al igual que display flex hace parte del flex-container.

Alinear en el main axis.

Dentro de las propiedades de flex-direction tenemos a:

row: es como dejar flex-direction por defecto como esta en la imagen.

column: Los elementos se comportan en forma de columna.
Aqui vemos como cambian los elementos del main axis se comportan en forma de columna.

Reverse

row-reverse: creamos una clase para el primer item para distinguirlo con naranja.
Ahora utilizamos la propiedad row-reverse, que es parecido al row pero invertido y hace que los objetos vallan de derecha a izquierda.

colum-reverse: es igual al column pero invertido y hacemos que valla de abajo para arriba.

Wrap

flex wrap: Mantener resolucion y que se vallan de para abajo.

caja flexible primera

caja flexible

caja flexible ultima

flex wrap-reverse: Mantener resolucion y que se vallan de para arriba.

caja flexible primera

caja flexible

caja flexible ultima

Justify-content

justify-content: Utilizamos esta instruccion junto a atributos como
center, space-around, space-between, space-evenly (main axis) para alinear nuestras cajas.

Justify-content: center: es utilizado para centrar las cajas como text aligh: center.

caja flexible primera

caja flexible

caja flexible ultima

Justify-content: space-around: es utilizado para ceparar las cajas es como margin auto.

caja flexible primera

caja flexible

caja flexible ultima

Justify-content: space-between: es igual a space around la diferencia es que separa las cajas en la mayor medida de lo posible.

caja flexible primera

caja flexible

caja flexible ultima

Justify-content: space-evenly: Es la mejora de space around y between ya que alinea las cajas de modo en que todas queden de las misma medida.

caja flexible primera

caja flexible

caja flexible ultima

Alinear en el cross-axis.

Tiene las siguientes instruciones con las siguientes propiedades.

aligh-items: flex-start, center, flex-end, stretch, baseline (cross axis) se usa cuando hay una linea de items.

aligh-content: se usa para cuando hay mas de una linea de items.

Aligh-items

aligh-items: center se usa para alinear en el centro del eje "y" los items.

caja flexible primera

caja flexible

caja flexible ultima

aligh-items: end se usa para alinear en el final del eje "y" los items.

caja flexible primera

caja flexible

caja flexible ultima

aligh-items: baseline se usa para alinear a la base del eje "y" los items.

caja flexible primera

caja flexible

caja flexible ultima

aligh-items: stretch Es la propiedad por defecto para ver cambios quitamos el height de todos los flex-items.
Se nos estira como se nos estiro la imagen del cacheton de platzi Para solucionar esto se usa flex-start.

caja flexible primera

caja flexible

caja flexible ultima

aligh-items: flex-start esta propiedad funciona sin el height al igual que stretch, esta caja se ajusta a su contenido.

caja flexible primera

caja flexible

caja flexible ultima

Aligh-content

aligh-content: se usa para cuando hay mas de una linea de items donde la diferencia de alight-items es que este une mas los elementos de las otras filas en cambio alight items los separa (se usa el wrap para mandar para abajo los items).

aligh-content: flex-start.

caja flexible primera

caja flexible

caja flexible ultima

aligh-content: flex-end.

caja flexible primera

caja flexible

caja flexible ultima

aligh-content: baseline (aqui es donde mas se usa baseline). Con wrap-reverse

caja flexible primera

caja flexible

caja flexible

caja flexible

caja flexible

caja flexible

caja flexible ultima