Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Calculando with correctamente

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Mas sobre Flexbox y desafios y actividad Disminuyendo proporcionalmente los elementos

por Terry Daniel Ildefonso Chagua
| 120.8k xp | 11 posts

Buenas noches, al principio tenemos un container flex abarcando items de un ancho de 200px: Items con pixel de 200Se agrega la propiedad flex-shrink al primer elemento con valor de 2, teniendo en cuenta que el valor por defecto es 1. Entonces entendemos que el primer item se encoge a una velocidad mayor (el doble en este caso, valor 2) y los demás items a la velocidad normal (valor 1). El padre se encoge hasta un ancho de 600px, por lo que todos sus hijos se encogen. Tenemos así las velocidades en que se encogen cada item:

  1. item -> 2
  2. item -> 1
  3. item -> 1
  4. item -> 1 Sumando serían a 5 en proporción. Si el padre se encoge en 200px = 800px - 600px Calculando: 200px / 5 = 40px
  5. item -> 80px
  6. item -> 40px
  7. item -> 40px
  8. item -> 40px Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadEn conclusíon las medidas quedarían con los anchos respectivos: 120px, 160px, 160px, 160px
2 respuestas
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Terry! Gracias por compartir tu pregunta con nosotros. Parece que tienes una buena comprensión de cómo funciona la propiedad flex-shrink en Flexbox. En cuanto a tu cálculo, parece correcto. Si el padre se reduce en 200px y la suma de las velocidades de encogimiento de los elementos es de 5, entonces cada elemento se reducirá en 40px. La distribución final de los anchos que mencionas también parece correcta. ¡Buen trabajo! Si tienes alguna otra pregunta, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)
solución!
por Estudiante
| 89.5k xp | 36 posts

Es exactamente lo que explica el Youtuber jonmircha, que por cierto vi ese video y me quedó muy claro como funciona. Ahí explica claramente como se puede calcular el rango reducción del Item con la propiedad flex-shrink dependiendo del # aplicado a dicha propiedad. Tu post me sirvió de inspiración para buscar más info sobre esta propiedad.