Notas rápidas de Flexbox
Tags: spanish, css3, flexbox, beginners
Published: 2023-02-23 03:30:12


## :checkered_flag:  Tabla de contenido  :checkered_flag:

- [Idea del post](#idea-del-post)
- [Lista de etiquetas por defecto en inline y block](#lista-de-etiquetas-por-defecto-en-inline-y-block)
- [Contexto flex y flex direction](#contexto-flex-y-flex-direction)
- [Lista de valores de propiedades](#lista-de-valores-de-propiedades)
- [Manejo de contenedores](#manejo-de-contenedores)
- [Manejo de item o elemento](#manejo-de-item-o-elemento)

## Idea del post

Esta es una guía rápida de flexbox y el objetivo es que tengas en mano los pasos u anotaciones para usarlo

Por último. Si te gusto este post déjame un :heart: 


## Lista de etiquetas por defecto en inline y block

Por defecto, html5 contiene etiquetas que tienen dirección en línea o en bloque sin necesidad de usar la propiedad flex y conocer las etiquetas nos ayudara con más precisión manipular los ítems en nuestros contenedores. A continuación una lista de las etiquetas más usadas 


| __Etiquetas en bloque__ | __Etiquetas en linea__|
| --- | --- |
| \<address\>     | \<img\> |
| \<article\>     | \<span\>   |
| \<aside\>       | \<button\>     |
| \<blockquote\>  | \<input\>       |
| \<div\>         | \<label\>   |
| \<fieldset\>    | \<select\> |
| \<figcaption\>  | \<textarea\> |
| \<figure\>      | \<br\> |
| \<footer\>      | \<a\> |
| \<form\>        | \<sup\> |
| \<h1\>          | \<sub\> |
| \<header\>      | \<script\> |
| \<hgroup\>      | \<q\> |
| \<hr\>          | \<object\> |
| \<li\>          | \<map\> |
| \<main\>        | \<i\> |
| \<nav\>         | \<var\> |
| \<ol\>          | \<time\> |
| \<output\>      | \<strong\> |
| \<p\>           | \<em\> |
| \<pre\>         | \<code\> |
| \<section\>     | \<cite\> |
| \<table\>       | \<acronym\> |
| \<tfoot\>       | \<small\> |
| \<ul\>          | \<big\> |




## Contexto flex y flex direction

- Básicamente, para usar flexbox necesitamos un elemento contenedor y que su contenedor tenga hijos.

- Al contenedor se lo conoce `flex-container` y a los hijos se los conoce como `flex-items`

- `display: flex;` es la propiedad para activar flexbox

- Además de activar flexbox con la propiedad `display: flex;` se necesita darle una dirección a través de la propiedad `flex-direction: ;`. El valor puede ser `row` o `column`
 * La dirección que se defina en el `flex-direction` será la 
   dirección principal o main axis y la dirección que no sé 
   escribió será la dirección secundaria o cross axis 
 * Usar la propiedad `flex-direction` nos da la ventaja de poder 
   invertir el main axis usando `flex-direction: row-reverse` o 
   `flex-direccion: column-reverse` como lo vemos en las 
   siguinetes imagenes:
   
   
![row direction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jut6kiutk8eu55edis2g.png)


![row reverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01h9xrhxhmdxn9xjvgsl.png)


![direction column](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yu7k9jgpm4ctml53rbz.png)


![column reverse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yjo79pav92dnd8vla22.png)



- Si deseamos activar flexbox y en el mismo valor darle la dirección, podemos usar `display: inline` para trabajar en filas, o `display: block` para trabajar en columnas 

- Cuando se trabaja en fila, los items tienen el alto y ancho de su contenido por defecto y no poseen algunas propiedades que, en cambio, trabajando en bloque o columna si se pueden aprovechar como alto, ancho y margenes. Entonces, para solucionar eso, podemos usar display en fila con las propiedades de bloque, a esto lo llamamos `display: inline-block`

***

## Lista de valores de propiedades 


Primero conoceremos los valores que se pueden usar en las propiedades:

- __flex-start__ Envia el o los elementos al comienzo del flex-container
- __flex-end__ Envia el o los elementos al final del flex-container
- __center__ Centra el o los elementos en el flex-container 
- __space-between__ Distribuye los espacios de los elementos en el flex-container ponendo el primer y el ultimo elemento al raz del container 
- __space-around__ Distribuye los espacios de los elementos en el flex-container sin poner el primer y el ultimo elemento al raz del container, esta opcion añade unos margenes entre item por defecto en algunos casos no parecieran estar distribuidos equitativamente 
- __space-evenly__ Distribuye los espacios de los elementos en el flex-container sin poner el primer y el ultimo elemento al raz del container, esta opcion si distribuye equitativamente los espacios 
- __baseline__ Los flex-items se alinearán en la dirección de su línea base, esta opción se ejecuta en el contenedor, no en el ítem. Ejemplo 

![baseline 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m15xn19cz7w3esxbv69l.png)

![baseline 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ainfn7zf6hyw2r5ipgq.png)

![baseline 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z08izr4sarqnoyuuahy8.png)


![baseline 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn5k453pqbjuzg6zsuq7.png)


- __nowrap__ Permite que el contenido se desborde del flex-container
- __wrap__ No permite que el contenido se desborde del flex-container reduciendo el tamaño de los elementos
- __wrap-reverse__ No permite que el contenido se desborde del flex-container reduciendo el tamaño de los elementos, además invierte su dirección 

***

## Manejo de contenedores 


- __Flex-wrap:__ Maneja el desbordamiento del flex-container. 
Sus propiedades son: 
 * nowrap
 * wrap
 * wrap-reverse 

- __Justify-content:__ Justifica o maneja la alineación en la dirección principal o main axis del flex-container.
Sus propiedades son:
 * flex-start
 * flex-end
 * center
 * space-between
 * space-around
 * space-evenly

- __Align-items:__ Alinea el contenido en la dirección secundaria o cross axis.
Sus porpiedades son:
 * flex-start 
 * flex-end
 * center
 * baseline

- __Align-content:__ Maneja la alineacion del flex-container siempre y cuando halla más de una fila, en tal caso el flex-direction sea row o halla más de una columna si el flex-direction es column.
Sus propiedades son:
 * flex-start
 * flex-end
 * center
 * space-between
 * space-around
 * space-evenly


***

## Manejo de item o elemento 

Las siguientes propiedades sirven para el manejo individual del item o elemento. 
Un contenedor también puede ser un ítem si es hijo de un `flex-container` padre. 

- __Order:__ Ordena los flex-items en el main axis. 
  El ítem que tenga el menor número será el primero. 
  Por defecto, los ítems tiene valor de 0.
  En el siguiente ejemplo el main axis es de 
  izquierda a derecha o row y poniéndole el valor de 
  1 lo enviamos al final 

![Imagen order](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79n5jseazf1ifpn4hgb7.png)


- __Flex-grow:__ Es el factor de crecimiento de los flex-items en relacion con otros, es decir, distribuye los espacios sobrantes afectando solo al main axis. Su valor se representa en forma de porciones en números enteros.
En el siguiente ejemplo vemos que exite un espacio sobrante y luego indicamos que los items se distribuyan en porciones iguales de 1


![Imagen flex grow1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nhl1mhzz6exds1nuz99.png)


![Imagen flex grow 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98k4hnat8ql0t1hb1ys8.png)






- __Flex-shrink:__ Determina que tanto se encogen los flex-items con respecto al otro, es decir, maneja los espacios faltantes, recordando que display flex no permite que su contenido se desborde, si no más bien los reduce. Siempre que flex-shrink tenga un valor positivo no se desborda el flex-container. Esta propiedad afecta al main axis. Por defecto su valor es 1 y no acepta valores negativos pero sí el 0. Ejemplo
En la siguiente imagen podemos observar que flex-shrink tiene un valor de 0, esto inmediatamente le quita la propiedad flex-shrink y le da el ancho o el alto que este por defecto en el css para el item 


![flex-shrink](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ygv671d291wi871suwg.png)

- __Flex-basis:__ Indica el tamaño de un flex-item de forma predominante, inclusive a su width base, flex-grow, o flex-thrink. Si su valor es auto su flex-basis sería su height o width, Afecta al main axis.
Ejemplo: 

Si ponemos un 
flex-direction: row;
flex-basis: 60px;
width: 100 px;

Predominará el `flex-basis`

Ejemplo2:
Que pasa si un ítem tiene contenido y no tiene width suponiendo que es flex y queremos distribuirlos iguales 

 
![basis 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khwszuhh2r234lkpf2x2.png)

La solucion 


![Baisis 2 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n2y5h6t2fz1mcyhemkh.png)

Se desborda el contenido, pero se distribuye en partes iguales 





- __Align-self:__ Permite alinear solo a un elemento en el cross axis o direccion secundaria. Hace lo mismo que align-items y con los mismo valores
 * flex-start 
 * flex-end
 * center
 * baseline

- __Flex:__ Es el shortcut para ejecutar tres propiedades para ítems al mismo tiempo, las cuales son `flex-grow`, `flex-shrink` y `flex-basis`.
Se la usa de la siguiente manera:
`flex: valor_grow valor_shrink valor_basis`

 Esta propiedad nos permite distribuir 
 equitativamente los ítems de 3 formas 
 1. `flex: 1 1 0;`
 2. `flex: auto;`
 3. `flex: 1;`