Aún más sobre cómo funciona Flexbox, explicado en gifs animados grandes, coloridos

La última vez comenzamos con las propiedades básicas de Flexbox: flex-direction, justify-content, align-items y align-self.

Estos comandos son poderosos para crear diseños básicos. Pero una vez que comience a crear páginas web con Flexbox, deberá profundizar más para maximizar su potencial.

Ahora echemos un vistazo en profundidad al tamaño de Flexbox y cómo puede aprovecharlo para crear diseños atractivos y adaptables.

Propiedad # 1: Flex-Basis

En el último artículo, analizamos principalmente las propiedades que se aplican a los elementos del contenedor. Esta vez, examinaremos exclusivamente el tamaño aplicado a elementos secundarios.

Nuestra primera propiedad es, en mi opinión, una de las propiedades menos explicadas en los tutoriales de Flexbox.

Pero no se preocupe. De hecho, es bastante sencillo.

Flex-base controla el tamaño predeterminado de un elemento, antes de que sea manipulado por otras propiedades de Flexbox (más sobre esto más adelante).

En el siguiente GIF, esto significa que es intercambiable con la propiedad de ancho:

Sin embargo, lo que hace que la base flexible sea única con respecto al ancho es que corresponde a nuestros viejos ejes flexibles:

La base flexible afecta el tamaño de un elemento en el eje principal.

Veamos qué sucede cuando mantenemos nuestra base flexible igual, pero cambiamos la dirección de nuestro eje principal:

Tenga en cuenta que tuvimos que cambiar de configurar la altura manualmente a configurar el ancho. Por tanto, la base flexible determina alternativamente el ancho o la altura, dependiendo de la dirección de flexión.

Propiedad # 2: Flex Grow

Ahora nos vamos a poner un poco más complejos.

Primero, establezcamos todos nuestros cuadrados con el mismo ancho, 120px:

Ahora, cuando se trata de la propiedad llamada flex-grow , el valor predeterminado es 0 . Eso significa que no se permite que los cuadrados crezcan para ocupar el espacio en el contenedor.

Qué significa eso? Bueno, intentemos incrementar flex-grow a 1 por cada cuadrado:

Los cuadrados ocupan colectivamente todo el ancho del contenedor, con el espacio distribuido uniformemente entre ellos. El valor de crecimiento flexible anula el ancho.

Sin embargo, la parte confusa de flex-grow es lo que realmente significa el valor. ¿Qué implica realmente flex-grow: 1 ?

Bueno, esto es lo que parece si configuramos el crecimiento flexible de cada cuadrado en 999:

Es ... exactamente lo mismo.

Eso es porque flex-grow no es un valor absoluto, es un valor relativo.

Lo que importa no es cuál es el valor de crecimiento flexible de un cuadrado por sí solo, sino qué es en relación con los otros cuadrados.

Si configuramos cada cuadrado para flex-grow: 1, y luego ajustamos el flex-grow de Square # 3, entonces vemos los cambios:

Para entender realmente lo que está pasando aquí, tomemos un desvío rápido hacia algunas matemáticas (simples).

Cada cuadrado comienza con un crecimiento flexible de 1. Si sumamos el crecimiento flexible de cada cuadrado, nuestro total es seis. Por tanto, el contenedor se divide en 6 secciones independientes. Cada cuadrado crece para llenar 1/6 del espacio disponible en el contenedor.

Cuando establecemos el flex-grow de Square # 3 en 2, el contenedor ahora se divide en 7 secciones diferentes, ya que el total de las propiedades de flex-grow es 1 + 1 + 2 + 1 + 1 + 1.

El cuadrado n. ° 3 obtiene 2/7 de ese espacio y el resto obtiene 1/7.

Cuando vamos a flex-grow: 3 para Square # 3, el contenedor se divide en 8 secciones (1 + 1 + 3 + 1 + 1 + 1) y Square # 3 obtiene 3/8, y el resto obtiene 1/8 .

Y así.

Flex-grow tiene que ver con las proporciones . Si configuramos cada cuadrado en flex-grow: 4 y el cuadrado # 3 en flex-grow: 12, obtenemos el mismo resultado que si fuera 1 y 3, respectivamente:

Lo que importa es lo que el crecimiento flexible de cada cuadrado es proporcional a los demás.

Como nota final, recuerde que, al igual que la base flexible, el crecimiento flexible se aplica en todo el eje principal. Nuestros cuadrados crecerán solo a lo ancho, a menos que establezcamos la dirección de flexión en columna.

Propiedad # 3: Flex Shrink

Flex-shrink es lo opuesto a flex-grow, determinando cuánto puede encogerse un cuadrado.

Solo entra en juego si los elementos deben encogerse para caber en su contenedor, es decir, cuando el contenedor es demasiado pequeño.

Su uso principal es especificar qué elementos desea reducir y qué elementos no. De forma predeterminada, cada cuadrado tiene una contracción flexible de 1, lo que significa que se contraerá a medida que la caja se contraiga.

Veámoslo en acción. En los GIFS a continuación, los cuadrados tienen un crecimiento flexible de 1, por lo que llenan el contenedor y un encogimiento flexible de 1, por lo que se les permite encogerse como lo hace.

Ahora establezcamos el encogimiento flexible de Square # 3 en 0. Está prohibido encoger, por lo que mientras crece para adaptarse al contenedor, se niega a sumergirse por debajo de su ancho establecido de 120px.

El valor predeterminado para flex-shrink es 1, lo que significa que sus elementos se encogerán hasta que les diga que no lo hagan.

Nuevamente, flex-shrink se trata de proporciones. Si una caja tiene un encogimiento flexible de 6 y el resto tiene un encogimiento flexible de 2, la única caja se encogerá 3 veces más rápido que el resto, a medida que el espacio se comprima.

Tenga en cuenta la redacción allí: el cuadrado con un encogimiento flexible 3x se encogerá 3x más rápido. Esto no significa que encogerá 1/3 del ancho.

En un momento, profundizaremos en cuánto se encogen y crecen las cosas. Pero primero, vayamos a nuestra última propiedad y juntemos todo.

Propiedad # 4: Flex

Flex es la abreviatura de crecimiento, encogimiento y base, todo junto.

El valor predeterminado es 0 (crecer) 1 (encoger) y automático (base).

Para nuestro último ejemplo, simplifiquemos a dos casillas.

Aquí están sus propiedades:

.square#one { flex: 2 1 300px;}
.square#two { flex: 1 2 300px;}

Ambos tienen la misma base flexible. Eso significa que si hay suficiente espacio para ambos (el contenedor es de 600 px más espacio para márgenes y relleno), ambos tendrán 300 px de ancho.

Pero a medida que la caja crece, Square 1 (con el mayor crecimiento flexible) crecerá dos veces más rápido. A medida que la caja se contrae, Square 2 (con mayor flexión-encogimiento) se encogerá dos veces más rápido.

Todos juntos ahora:

Cómo las cosas se encogen y crecen

Esto es lo que puede resultar confuso: cuando el Cuadrado 1 crece, no llega al doble del tamaño del Cuadrado 2. Del mismo modo, cuando el Cuadrado 2 se encoge, no se reduce a la mitad del tamaño del Cuadrado 1, aunque la proporción de contracción flexible es de 2 a 1.

No es su tamaño lo que es 2 a 1 o 1 a 2. Es su tasa de encogimiento y crecimiento.

Un poco de matemáticas

El tamaño inicial del contenedor es 640px. Después de tener en cuenta el relleno de 20px a cada lado del contenedor, esto deja suficiente espacio para que ambos cuadrados vuelvan a su base flexible de 300px

Cuando el contenedor está configurado en 430 px, hemos perdido 210 px de espacio. El cuadrado 1, con el encogimiento flexible de 1, pierde 70px . El cuadrado 2, con el encogimiento flexible de 2, pierde 140px .

Cuando el contenedor se reduce a 340 px, ahora hemos perdido 300 px de espacio. El cuadrado 1 pierde 100 px , el cuadrado 2 pierde 200 px .

El espacio perdido se divide de acuerdo con la relación de sus respectivas contracciones flexibles (2 a 1).

Es la misma historia con flex-grow. Cuando el contenedor crece a 940px y hemos ganado 300px de espacio, Square 1 obtiene 200px adicionales y Square 2 obtiene 100px adicionales .

Cuando se trata de propiedades flexibles, las proporciones son el nombre del juego.

En el GIF anterior, puede ver cómo se ajusta el ancho de acuerdo con las proporciones, con el delta (∆) mostrando la diferencia con la base flexible.

Conclusión

Como resumen final: la base flexible controla qué tan grande será un elemento a lo largo del eje principal antes de que ocurra cualquier crecimiento o encogimiento. Flex-grow determina cuánto crecerá en proporción a los elementos hermanos, y flex-shrink determina cuánto se encogerá.

Tenemos algunas propiedades más de Flexbox que cubrir; esté atento a eso en las próximas semanas.

Muchas gracias por leer! La respuesta a estos artículos ha sido abrumadora. Realmente agradezco a todos que se hayan tomado el tiempo de leer, responder, recomendar y compartir.

Si hay un concepto en particular (Flexbox o de otro tipo) que le gustaría ver explicado en un artículo similar, déjeme una respuesta o envíeme un tweet. También puedes seguirme en Twitter y Medium (presionando el botón de seguimiento a continuación).