Solucionado
¿Por qué se escribe la función flex-shrink en la parte del código que no está pensada para ser responsiva, es decir, antes del @MediaQuery, pero de todas maneras funciona de forma repsonsiva? ¿Lo ideal no sería poner esa función luego del MediaQuery?
¡Hola Silviajulianarociodiazdiaz!
La propiedad flex-shrink se utiliza para controlar cómo se reducirá el tamaño de un elemento flexible cuando el espacio disponible sea insuficiente. Esta propiedad se puede utilizar tanto dentro como fuera de un @media query y seguirá funcionando de manera correcta en ambos casos.
La razón por la que se puede utilizar antes del @media query es porque flex-shrink no está relacionado directamente con la responsividad de un diseño. Su función principal es controlar cómo los elementos flexibles se ajustan cuando el espacio se reduce. Por lo tanto, no es necesario colocarla dentro de un @media query para que funcione correctamente.
Sin embargo, si deseas tener un mayor control sobre cómo se comporta la propiedad flex-shrink en diferentes tamaños de pantalla, puedes utilizarla dentro de un @media query. Por ejemplo, si deseas que un elemento se reduzca más en pantallas más pequeñas, puedes establecer un valor diferente para flex-shrink dentro de un @media query específico.
En resumen, la propiedad flex-shrink puede funcionar correctamente tanto dentro como fuera de un @media query, dependiendo de tus necesidades y preferencias de diseño.
¡Espero haber ayudado y buenos estudios!
Muy buena explicación, ¡gracias!