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

La última vez comenzamos con las propiedades básicas de Flexbox: dirección de flexión, contenido de justificación, elementos de alineación y autoalineación.

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

Ahora echemos un vistazo profundo al tamaño de Flexbox, y cómo puede aprovecharlo para crear diseños adaptables y hermosos.

Propiedad # 1: Flex-Basis

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

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

Pero no te preocupes. En realidad es bastante sencillo.

La base flexible controla el tamaño predeterminado de un elemento, antes de que sea manipulado por otras propiedades de Flexbox (más sobre eso 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 desde el ancho es que corresponde a nuestros buenos ejes flexibles:

La base flexible afecta el tamaño de un elemento a través del 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 establecer la altura manualmente a establecer el ancho. Por lo tanto, la base flexible determina alternativamente el ancho o la altura, dependiendo de la dirección flexible.

Propiedad # 2: Flex Grow

Ahora vamos a ser un poco más complejos.

Primero, configuremos 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 los cuadrados no pueden crecer para ocupar el espacio en el contenedor.

Qué significa eso? Bueno, intentemos incrementar el crecimiento flexible 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 sobre el crecimiento flexible es lo que realmente significa el valor. ¿Qué implica flex-grow: 1 en realidad?

Bueno, así es como se ve si establecemos el crecimiento flexible de cada cuadrado en 999:

Es ... exactamente lo mismo.

Esto se debe a que el crecimiento flexible no es un valor absoluto, es un valor relativo.

Lo que importa no es el valor de crecimiento flexible de un cuadrado en sí mismo, sino lo que es en relación con los otros cuadrados.

Si configuramos cada cuadrado para el crecimiento flexible: 1, y luego ajustamos el crecimiento flexible del Cuadrado # 3, entonces vemos los cambios:

Para comprender realmente lo que está sucediendo 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. El contenedor se divide así en 6 secciones separadas. Cada cuadrado crece para llenar 1/6 del espacio disponible en el contenedor.

Cuando establecemos el crecimiento flexible del Cuadrado # 3 en 2, el contenedor ahora se divide en 7 secciones diferentes, ya que el total de las propiedades de crecimiento flexible es 1 + 1 + 2 + 1 + 1 + 1.

El cuadrado # 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 se trata de proporciones. Si configuramos cada cuadrado para flex-grow: 4, y el cuadrado # 3 para flex-grow: 12, obtenemos el mismo resultado que si fuera 1 y 3, respectivamente:

Lo que importa es 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 a través del 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, que determina cuánto se puede encoger un cuadrado.

Solo entra en juego si los elementos deben encogerse para encajar 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. Por defecto, cada cuadrado tiene un encogimiento flexible de 1, lo que significa que se encogerá 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 encoger como lo hace.

Ahora configuremos el encogimiento flexible del Cuadrado n. ° 3 en 0. Está prohibido encoger, por lo tanto, mientras crece para adaptarse al contenedor, se niega a sumergirse por debajo de su ancho de 120 píxeles establecido.

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

Nuevamente, el encogimiento flexible se trata de proporciones. Si una caja tiene encogimiento flexible de 6, y el resto tiene encogimiento flexible de 2, la caja se encogerá 3 veces más rápido que el resto, ya que el espacio se comprime.

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

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

Propiedad # 4: Flex

Flex es la abreviatura de crecimiento, reducción y base, todo junto.

Su valor predeterminado es 0 (crecer) 1 (reducir) y automático (base).

Para nuestro último ejemplo, simplifiquemos a dos cuadros.

Aquí están sus propiedades:

.un cuadrado {
  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 tiene 600 px más espacio para márgenes y relleno), ambos tendrán 300 px de ancho.

Pero a medida que la caja crece, el cuadrado 1 (con el mayor crecimiento flexible) crecerá el doble de rápido. A medida que la caja se contrae, Square 2 (con el encogimiento flexible más alto) se encogerá el doble de rápido.

Todos juntos ahora:

Cómo las cosas se encogen y crecen

Esto es lo que puede ser confuso: cuando el Cuadrado 1 crece, no crece hasta ser dos veces más grande que el Cuadrado 2. Del mismo modo, cuando el Cuadrado 2 se contrae, 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 contracción y crecimiento.

Un poco de matemáticas

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

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

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 respectivos encogimientos flexibles (2 a 1).

Es la misma historia con flex-grow. Cuando el contenedor crece a 940 px, y hemos ganado 300 px de espacio, Square 1 obtiene 200 px adicionales y Square 2 obtiene 100 px 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 (∆) que muestra la diferencia con respecto a la base flexible.

Conclusión

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

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

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

Si hay un concepto en particular (Flexbox u otro) que le gustaría ver explicado en un artículo similar, deje una respuesta o twittee. También puedes seguirme en Twitter y Medium (presionando el botón de seguir a continuación).