Intro a Flexbox.
Tags: css, flexbox
Published: 2020-11-20 18:59:47

Buenas! Uno de los temas mas importantes que debemos conocer a la hora de maquetar un sitio es cómo posicionar los elementos a renderizar.
Si bien hay frameworks que nos facilitan la vida con este tema la verdad es que, desde hace un par de años, CSS nos brinda la posibilidad de posicionar los elementos de manera nativa, y ésta es por medio de FlexBox.

###Requisitos para leer esta documentación.
Saber qué son los divs en HTML.
Saber qué son las clases en CSS y tener un manejo del mismo.
Tener instalado algún editor de texto, en mi caso uso [Visual Studio Code](https://code.visualstudio.com/download).

###Manos a la obra!
Generá un archivo de HTML5 básico (llamado index.html) y linkealo a un archivo CSS externo (llamalo estilos.css).

Dentro del body del HTML escribí lo siguiente:
{% gist https://gist.github.com/fernandomatiasdv/9872b32a82a4d52db7a9b22e5169870e %}

Acá creamos dos divs, al primero con la clase **contenedor** mientras que al _div hijo_ con la clase **caja-flexible**

Luego en _estilos.css_ vas a agregar el siguiente código:
{% gist https://gist.github.com/fernandomatiasdv/2960e515f66037ff6b0208f2825ccae1 %}

_caja\_flexible_ renderiza un cuadrado de color turquesa del tamaño 60px * 60px. Mientras que _contenedor_ será quien introduzca los cambios necesarios para que la caja flexible se desplace a través de la pantalla. Para establecer que el elemento sea flexible es necesario usar la propiedad display: flex.


**Desplazamiento horizontal**
La propiedad _justify-content_ hará que el (o los) elemento(s) se desplacen de manera horizontal. Probemos modificando _contenedor_, agreguemosle lo siguiente:

justify_content: center;

Guardá y vas a ver como la caja se desplazó al centro de la pantalla.
Si querés llevarlo hacia los extremos tenés dos opciones:
flex_end
flex_start.

Probalos! Con el primero el objeto irá hacia el final de la pantalla, mientras que con el segundo lo hará hacia la izquierda (como en la posición inicial).
**nota**: La propiedad justify-content es relativa a la codificación de caracteres que tengamos, es decir, si el navegador detecta que utilizamos el lenguaje árabe, flex-end alineará el contenido a la izquierda mientras que flex-start lo hará a la derecha (puesto que el lenguaje arábigo se escribe de derecha a izquierda).

**Desplazamiento vertical**
En este desplazamiento se muestra como el objeto se desplaza de arriba hacia abajo pero antes de arrancar a probar debemos definirle una altura a nuestro _contenedor_. Para ésto le agregamos:

height: 650px;
background-color: tan;

Con el background-color podremos ver los limites hacia a donde podría moverse el contenido de la caja.

Y ahora si, para desplazarla tenemos la propiedad align-items, dentro de la clase _contenedor_:
align-items: flex-end;
Si lo queremos mover al centro reemplazamos _flex-end_ por **center** y si lo queremos llevar hacia a arriba **flex-start**.

¿Cómo lo llevamos justo al centro de la pantalla? Combinando justify-content con align-items:
{% gist https://gist.github.com/fernandomatiasdv/4ac4f157a628aafdd89ac083390827ab %}

###Varias cajas.
Así como nos manejamos con una caja podemos usar varias, pero para poder diferenciarlas vamos a hacer algunas modificaciones a la _caja\_flexible_
{% gist https://gist.github.com/fernandomatiasdv/be999fb3e79a681d63494c92e8bf04a9 %}

Bien! Ahora:
Agregamos el número 1 al div que tiene la clase "caja-flexible"
creá un div más (a la misma altura del primer div) con el valor 2. También asignale la clase "caja-flexible".
{% gist https://gist.github.com/fernandomatiasdv/1704423e4ca509a5414c40040f00d50f %}

Una vez agregada fijate que nos quedaron ambas cajas en el centro de la pantalla, ya que ambos tienen las propiedades de alineación horizontal y vertical centradas. Ahora vamos a aprender a cómo interactúan cuando están juntas:

Para generar el desplazamiento vertical volvemos con justify-content pero vamos a tener tres nuevas propiedades:
**space-between**: Va a marcar la mayor distancia entre los dos objetos.
**space-around**: Va a dejarle un margen izquierdo al objeto de la izquierda y un margen a la derecha del objeto de la derecha, entre medio tendrá el doble distancia de los márgenes.
**space-evenly**: Deja los márgenes del mismo tamaño que los del centro.

Veamos dos ejemplos, el primero con space-between:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/00a18gt551o3c72mysi1.PNG)

Con space-around (las distancias no son parte del desarrollo, notá que la distancia de los márgenes es de 171 mientras que la distancia del interior es de 342):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z9hur4a723epqthjexsz.PNG)

Y finalmente con space-evenly:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/azkx8oxr729revxr7h9h.PNG)

###Darle una orientación a los elementos.

La orientación nos dará "el órden" de los elementos. 
Por defecto, si yo escribo 
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>

El orden natural sería:
- Si lo analizamos horizontalmente, el 1 está a la izquierda, el 2 en el centro y el 3 a la derecha.
- Si lo analizamos verticalmente, el 1 está arriba de todo, el 2 en el centro y el 3 abajo.

Ahora veremos como cambiarle el orden sin la necesidad de intercambiar el orden de los divs de manera manual.

Para empezar agregá un div como los otros dos con el contenido "3".
A nivel horizontal tendremos las tres cajas con los valores 
1, 2 y 3.
Agreguemos **flex-direction** a la clase "contenedor". Y el valor será row-reverse.
flex-direction: row-reverse;
Ahora fijate como quedaron invertidas las cajas:
3, 2 y 1.

Así como los invertimos horizontalmente también podemos hacerlo verticalmente pero antes de ir con la instrucción debemos ver en forma de columna las cajas, para ésto utilizaremos también **flex-direction** con el valor **column**.
Cambiemos _flex-direction : row-reverse_ por
flex-direction: column;

Veamos el resultado:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/67mndgk2pk6ac7wf07l7.PNG)

Y ahora si, si queremos ver como invertir los valores debemos usar column-reverse:
flex-direction: column-reverse;
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/race78k8q5ll8hnh242p.PNG)

**NOTA**: Recordá que podes usar **justify-content** y **align-items** para moverlos a travez de la pantalla, por ahora los estamos usando centrados a ambos pero modificalos y vas a ver cómo se desplazan los cubos por la pantalla!

Dentro de poco continuo con una serie mas avanzada de flexbox :) Hasta la próxima!!