Propiedad CSS : flex
Esta propiedad es un atajo para las propiedades flex-grow, flex-shrink, y flex-basis.
Sintaxis
flex: grow shrink basis;
flex-grow
La propiedad flex-grow nos permite especificar el factor de crecimiento para un flex-item. De esta forma tenemos la habilidad de poder hacer crecer un flex-item especificando una proporción.
Por defecto es 0, si es 0 no se aplicará ninguna correción de tamaño al flex-item. En caso de no ser 0, el valor determina la proporción de espacio que debe utilizar un flex-item en relación con los demás flex-items.
flex-shrink
La propiedad flex-shrink se utiliza para especificar factor de contracción de un flex-item.
Si el valor es 0, se utilizara el valor de flex-basis como referencia. En caso de que el valor no sea 0, especifica cómo el elemento se reducirá en relación con el resto de los elementos flexibles en el interior del mismo contenedor. Por defecto es 1.
flex-basis
La propiedad flex-basis se utiliza para especificar el tamaño de un flex-item antes de distribuir el tamaño disponible según las normas del contenedor flexible.
| Valor | El valor puede ser cualquier tipo de unidad válido tanto relativo como absoluto (px, cm, em, %, etc...) |
| auto | Se obtiene el valor basandose en el tamaño de su propio contenido. Este es el valor por defecto. |
Código de ejemplo
Compatibilidad
Esta propiedad es soportada por todos los navegadores compatibles con CSS3.
| Soportado a partir de la versión 29 | |
| Soportado a partir de la versión 20 | |
| Soportado a partir de la versión 12.1 | |
Soportado a partir de la versión 6.1 con el prefijo -webkit- | |
| Soportado a partir de la versión 11 |
Ejemplo modificado por última vez : 30/12/2020