Atributo flex de CSS

Definición y uso

Flex es un atajo para las siguientes propiedades:

El valor de flex establece la longitud flexible del proyecto flexible.

Notas:Si el elemento no es un proyecto flexible, la propiedad flex es inválida.

Por favor, consulte:

Tutoriales: CSS cuadro flexible

Referencia:Atributo flex-basis de CSS

Referencia:Atributo flex-direction de CSS

Referencia:Atributo flex-flow de CSS

Referencia:Atributo flex-grow de CSS

Referencia:Atributo flex-shrink de CSS

Referencia:Atributo flex-wrap de CSS

Referencia:HTML DOM propiedad flex

Ejemplo

Haga que todos los elementos flexibles tengan la misma longitud, independientemente de su contenido:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

Prueba personalmente

Sintaxis de CSS

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

Valor de la propiedad

Valor Descripción
flex-grow Número, que especifica la cantidad de expansión del elemento en comparación con los otros elementos flexibles.
flex-shrink Número, que especifica la cantidad de contracción del elemento en comparación con los otros elementos flexibles.
flex-basis

Longitud del elemento.

Valores válidos: "auto"、"inherit" o valores en unidades de longitud como "%", "px", "em" o cualquier otra unidad de longitud.
auto Equivalente a 1 1 auto.
initial Equivalente a 0 1 auto. Vea initial。
none Equivalente a 0 0 auto.
inherit Hereda la propiedad del elemento padre. Vea inherit。

Detalles técnicos

Valor predeterminado: 0 1 auto
Herencia: No
Creación de animaciones: Soportado. Consulte las propiedades individuales. Vea:Atributos relacionados con la animación。
Versión: CSS3
Sintaxis de JavaScript: object.style.flex="1"

Más ejemplos

Combine flex y consultas de medios para crear diferentes disposiciones para diferentes tamaños de pantalla/dispositivos:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* Diseño responsive - crea una disposición en una columna (100％) en lugar de una disposición en dos columnas (50％) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Prueba personalmente

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.

Los números con -webkit-、-ms- o -moz- indican la primera versión que utiliza el prefijo.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0