flex: 1 ¿Qué es exactamente?

flex: 1, es decir, flex-grow: 1, generalmente se usa como diseño adaptativo En la pantalla: flex del contenedor principal, el tamaño de la barra lateral es fijo. y luego el área de contenido flex: 1, el área de contenido se expande automáticamente para llenar el espacio restante.

La propiedad flex es un acrónimo de flex-grow, flex-shrink y flex-basis.

Se recomienda utilizar este acrónimo en lugar de escribir estas tres propiedades por separado.

flex-grow: define qué tan grande es el elemento

flex-shrink: define qué tan pequeño es el elemento

flex-basis: define antes de asignar; espacio adicional, cuánto espacio ocupa el elemento en la página principal (tamaño principal), el navegador calculará si hay espacio adicional en la página principal en función de este atributo,

es la longitud o porcentaje L: considerado valor de base flexible,

flex es un número no negativo n y una longitud o porcentaje L: considerados los valores de flex-grow y flex-basis respectivamente,

flex es un número no negativo n y A longitud o porcentaje L: considerado el valor de flex-grow y flex-basis respectivamente.