La propiedad flex en CSS es una abreviatura de flex-crecer, flex-reducir, y base flexible. Sólo funciona en los elementos flexibles, por lo que si el elemento del contenedor no es un elemento flexible, el doblar La propiedad no afectará el artículo correspondiente.

Esta propiedad se utiliza para establecer la longitud de los elementos flexibles. El posicionamiento de elementos secundarios y el contenedor principal es fácil con esta propiedad CSS. Se utiliza para establecer cómo un elemento flexible se reducirá o crecerá para caber en el espacio.

El doblar La propiedad se puede especificar mediante uno, dos o tres valores.

• Cuando existe la sintaxis de un valor, el valor debe ser un número o las palabras clave como ninguno, auto, o inicial .
• Cuando existe la sintaxis de dos valores, el primer valor debe ser un número (usado como crecimiento flexible ), el segundo valor puede ser un número (usado para flex-contraíble ) o un valor de ancho válido (utilizado como base flexible ).
• Cuando hay una sintaxis de tres valores, entonces los valores deben seguir el orden: a número Para el crecimiento flexible, a número Para el flex-contraíble, y un válido ancho valor por base flexible .

Sintaxis

 flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit; 

Valores de propiedad

crecimiento flexible: Es un número positivo sin unidades que determina el factor de crecimiento flexible. Especifica cuánto crecerá el artículo en comparación con los otros artículos flexibles. No se permiten valores negativos. Si se omite, se establece en el valor 1 .

contracción flexible: Es el número positivo sin unidades el que determina el factor de contracción flexible. Especifica cuánto se encogerá el artículo en comparación con los otros artículos flexibles. No se permiten valores negativos. Si se omite, se establece en el valor 1 .

base flexible: Es la longitud en unidades relativas o absolutas la que define la longitud inicial del elemento flexible. Se utiliza para establecer la longitud del elemento flexible. Sus valores pueden ser heredar coche, o un número seguido de las unidades de longitud como em, px, etc. No se permiten valores negativos. Si se omite, se establece en el valor 0 .

auto: Este valor de la propiedad flex es equivalente a 1 1 automático .

ninguno: Este valor de la propiedad flex es equivalente a 0 0 automático . No aumenta ni reduce los elementos flexibles.

inicial: Establece la propiedad en su valor predeterminado. Es equivalente a 0 0 automático .

heredar: Hereda la propiedad de su elemento padre.

Ejemplo

En este ejemplo, hay tres contenedores, cada uno con tres elementos flexibles. El ancho y la altura de los contenedores son 300px y 100px .

Estamos aplicando el flexión: 1; a los elementos flexibles del primer contenedor, flexionar: 0 50px; a los elementos flexibles del segundo contenedor, y flexionar: 2 2; a los elementos flexibles del tercer contenedor.

 CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> 

Producción