Atributo flex-basis de CSS

Definición y uso

El atributo flex-basis especifica la longitud inicial del elemento flexible.

Comentarios:Si el elemento no es un elemento flexible, el atributo flex no es válido.

Vea también:

Tutorial de CSS: Cuadro flexible de CSS

Manual de referencia de CSS:Atributo flex

Manual de referencia de CSS:Atributo flex-direction

Manual de referencia de CSS:Atributo flex-flow

Manual de referencia de CSS:Atributo flex-grow

Manual de referencia de CSS:Atributo flex-shrink

Manual de referencia de CSS:Atributo flex-wrap

Manual de referencia de HTML DOM:Atributo flexBasis

Ejemplo

Establezca la longitud inicial del segundo elemento flexible en 100 píxeles:

div:nth-of-type(2) {
  flex-basis: 100px;
}

Pruebe usted mismo

Sintaxis de CSS

flex-basis: number|auto|initial|inherit;

Valor del atributo

Valor Descripción
number Unidad de longitud o por ciento, que especifica la longitud inicial del elemento flexible.
auto Valor predeterminado. La longitud es igual a la longitud del elemento flexible. Si no se especifica la longitud de este elemento, la longitud se basará en su contenido.
initial Establezca este atributo en su valor predeterminado. Ver: initial.
inherit Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: auto
Herencia: No
Creación de animación: Soportado. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.flexBasis="200px"

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- o -moz- indican la primera versión que utiliza el prefijo.

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