4

¿Qué significa el 1, el 0 y el auto? flex: 1 0 auto; al utilizar flexbox.

3 respuestas 3

5

¿Qué significa el 1, el 0 y el auto? flex: 1 0 auto;

Los 3 valores son: flex-grow | flex-shrink | flex-basis

<'flex-grow'>
Define el flex-grow del elemento flexible. Ver <number> para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.

La propiedad flex-grow de CSS especifica el factor de crecimiento de un elemento flexible. Se especifica qué cantidad de espacio debe ocupar el elemento dentro del contenedor flexible.

  • En tu caso 1, es decir, el tamaño es proporcional a 1.

<'flex-shrink'>
Define el flex-shrink del elemento flexible. Ver <number> para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.

La propiedad flex-shrink de CSS especifica el factor de contracción de flexión de un elemento flexible.

  • En tu caso 0, es decir, se va a achicar 0 veces más rápido que sus hermanos.

<'flex-basis'>
Define el flex-basis del elemento flexible. Se acepta cualquier valor válido para las propiedades width y height . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.

La propiedad flex-basisde CSS específica la base flexible, la cual es el tamaño inicial de un elemento flexible. Ésta propiedad determina el tamaño de una caja de contenidos a no ser que se haya especificado de otra forma usando box-sizing.

  • En tu caso auto, es decir, su tamaño inicial se calculara automáticamente.

Fuente: flex - CSS | MDN

1
  • +1. Con un ejemplo, la respuesta quedaría muy completa. Por ejemplo, mostrar en qué casos puede ser útil. Se me ocurren ejemplos como sticky header y footer, etc.
    – gugadev
    el 30 dic. 2016 a las 20:37
4

Los valores comunes de flex:

Flex: 0 auto;

Esto es lo mismo que flex: initial;ya la taquigrafía para el valor por defecto: flex: 0 1 auto. Se da el tamaño del elemento basado en sus width/ height (o su contenido si no se establece).

Flex: auto;

Esto es equivalente a flex: 1 1 auto. Ten cuidado, este no es el valor por defecto. Se da el tamaño del elemento basado en sus width/ height, pero hace que sea totalmente flexible, de manera que absorbe cualquier espacio adicional a lo largo del eje principal.

Flex: ninguno;

Esto es equivalente a flex: 0 0 auto. Se da el tamaño del elemento de acuerdo con sus width/ height, pero lo hace totalmente inflexible.

Fuente

3

Según la documentación de w3c.org (sitio oficial), la propiedad flex permite a un contenedor distribuir el espacio libre a sus elementos (proporcional a su factor flex grow) para llenar el contenedor, o los encoge (proporcional al factor flex shrink) para evitar el desbordamiento (overflow).

Como puedes observar, la documentación te habla de dos propiedades de los elementos que están contenidos en un contenedor flex en su propia definición. Sin embargo, la propiedad flex puede adoptar los siguientes valores:

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

Y el valor inicial para la propiedad flex es:

flex: 1 0 auto

Cada uno de los posibles valores de la propiedad flex corresponde a:

  • flex-grow: Este es el factor de crecimiento. Corresponde a un número que determina cuánto crecerá el elemento flexible en relación con el resto de los elementos flexibles dentro del contenedor flex si hay espacio libre. Cuando se omite es equivalente a poner un 1.

  • flex-shrink: Este valor especifica el factor de encogimiento y es el que determina cuánto se contraerá el elemento flexible en relación con el resto de los elementos flexibles dentro del contenedor flex si falta espacio en el contenedor. Cuando se omite es equivalente a poner un 1.

  • flex-basis: Este valor especifica el valor inicial de un elemento flexible antes de que el espacio libre se distribuya de acuerdo con los factores de flexión (flex-grow y flex-shrink). Cuando se omite su valor por defecto es 0.

Los valores que puede tomar flex-basis son:

  • auto: Cuando toma este valor, flex-basis toma el valor de la propiedad principal de tamaño usada como flex-basis. Si este valor es auto por sí solo, entonces el valor usado es content.

  • content: Indica ajuste automático de tamaño basado en el contenido del flex item.

  • width: Para el resto de valores, flex-basis es resuelto de la misma manera que la anchura (width) y la altura (height).

  • none: El valor none equivale a 0 0 auto.

Por último, dejo una imagen sacada también de la documentación en la que diferencia entre establecer flex "absoluto" (empezando con un flex-basis de 0) o un flex "relativo" (partiendo del tamaño del contenido del elemento como base). Los tres elementos tienen factores flex de 1, 1 y 2 respectivamente. Fíjate que el elemento con un factor flex de 2 crece el doble.

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.