Flexbox: flex:1 y flex:auto 🎨
Tags: css, webdev, spanish, html
Published: 2022-04-17 17:10:09

#**Índice**   
1. [Introducción](#id1)
2. [`flex:1` para repartir el espacio sobrante de manera igualitaria](#id2)
3. [¿Cuando usar `flex-1`?](#id3)
4. [`flex:auto` para repartir el espacio sobrante de manera proporcional](#id4)
5. [¿Cuando usar `flex-auto`?](#id5)
6. [Frameworks CSS](#id6)
7. [Conclusiones](#id7)
8. [Referencias](#id8)

## **1. Introducción**<a name="id1"><a/>
En el [post anterior](https://dev.to/duxtech/flexbox-flex-grow-flex-shrink-y-flex-basis-o96):

{% link https://dev.to/duxtech/flexbox-flex-grow-flex-shrink-y-flex-basis-o96 %}

se comprendio como funcionan las propiedades `flex-grow`, `flex-shrink` y `flex-basis`. Los devs más experimentados sugieren usar el atajo `flex` para los desarrollos.

![img](https://dev-to-uploads.s3.amazonaws.com/i/onoxj7gs9xj4wuf87kjl.png)

Recordemos los valores por defecto de las propiedades individuales:

```css
/*los items no se expanden si su padre tiene espacio de sobra*/
flex-grow: 0;
/*los items se reducen igualitariamente si no entran en su padre*/
flex-shrink: 1;
/*se respetan los valores width y height (si los tienen)*/
flex-basis: auto;
```

En la práctica pocas veces veremos estas propiedades escritas una por una en un `flex-item`, en su gran mayoría nos toparemos con una sintaxis como en la imagen de arriba ☝🏽

Y es posible simplificar aún este atajo como veremos ahora:

## **2. `flex:1` para repartir el espacio sobrante de manera igualitaria**<a name="id2"><a/>

```css
/*flex:1 es una manera breve de escribir:*/
flex-grow:1;
flex-shrink:1;
flex-basis:0;
```
> Todos los items crecen y decrecen de manera igualitaria.

Imaginemos el siguiente caso: tenemos un contenedor de `500px` de ancho con 4 hijos de `100px`, `125px`, `75px`, `50px` respectivamente. Tenemos `150px` de sobra para repartir entre los 4 items y así poder rellenar todo el ancho del container.

![img](https://github.com/crisdux/img-dev-to/blob/master/flex-1.png?raw=true)

{% details Clik para el el código: %} ```css
.container {
  display:flex;
  border: 1px solid #111;
  width:500px;
  height:200px;
}

.container > div {
  height:100px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.item-1 {
  width:100px;
  background-color:coral;
}

.item-2{
  width:125px;
  background-color:chocolate;
}

.item-3{
  width:75px;
  background-color: violet;
}

.item-4{
  width:50px;
  background-color:orange;
}
```
{% enddetails %}

## **3. ¿Cuándo usar `flex-1`?**<a name="id3"><a/>
* `flex-1` es una propiedad para los `flex-items`.
* Usarlo cuando tenemos espacio sobrante en un `flex-container` y se desea repartir ese espacio de manera **igualitaria** entre todos los `flex-items`.

{% codepen https://codepen.io/dux-soft/pen/XWVRdRg %}

`flex:1` toma el ancho total del contenedor y lo divive entre el número de hijos, por ello cada hijo medirá lo mismo y el contenedor estará lleno. `500px / 4 items = 125px por item`

Como podemos ver cuando usamos `flex-1` no importa el ancho que definimos en cada item, no importa si tenemos items angostos o anchos, siempre distribuiremos los items de manera **igualitaria**.

¿Qué ocurre entonces cuando queremos que los items se distribuyan de manera proporcional? Acá entra `flex:auto`.

## **4. `flex:auto` para repartir el espacio sobrante de manera proporcional**<a name="id4"><a/>

```css
/*flex:auto es una manera breve de escribir:*/
flex-grow:1;
flex-shrink:1;
flex-basis:auto;
```
> Todos los items crecen y decrecen de manera proporcional.

Trabajamos nuevamente con el ejemplo anterior:

![img](https://github.com/crisdux/img-dev-to/blob/master/flex-1.png?raw=true)


{% codepen https://codepen.io/dux-soft/pen/abEWZLM %}

`flex:auto` toma el espacio sobrante del contenedor y lo divide entre el número de hijos, por ello cada hijo crecerá proporcionalmente. `150px / 4 items = 37.5px por item`

## **5. ¿Cuándo usar `flex-auto`?**<a name="id5"><a/>
* `flex-auto` es una propiedad para los `flex-items`.
* Usarlo cuando tenemos espacio sobrante en un `flex-container` y se desea repartir ese espacio de manera **proporcional** entre todos los `flex-items`.

## **6. Frameworks CSS**<a name="id6"><a/>
Marcos como **Tailwindcss** tiene clases de utilidad listas para ser usadas, como por ejemplo:

![img](https://github.com/crisdux/img-dev-to/blob/master/flex-tailwind.png?raw=true)

Con este post ya podrías usar estas clases de utilidad sin ningun problema.

## **7. Conclusiones**<a name="id7"><a/>
* `flex-1` se calcula dividiendo el **ancho total del padre** entre la **cantidad de los hijos**, por ello todos los items crecen y se ven del mismo tamaño.
* `flex-auto` se calcula dividiendo el **espacio sobrante del contenedor** entre la **cantidad de los hijos**, por ello los items crecen proporcionalmente.

## **8. Referencias**<a name="id8"><a/>
* [Learn CSS](https://web.dev/learn/css/flexbox/)
* https://www.desarrollolibre.net/blog/css/las-propiedades-flex-grow-flex-shrink-y-flex-basis

---

Posiblemente los siguientes artículos sean de tu interés: 

{% link https://dev.to/duxtech/es6-promesas-en-javascript-5bpb %}

{% link https://dev.to/duxtech/logical-nullish-assignment-en-javascript-4367 %}

{% link https://dev.to/duxtech/local-storage-api-en-javascript-o88 %}

![img](https://media.giphy.com/media/eujb1tWaj3ZxS/giphy.gif)