flex-basis

Índice

Definición de .flex-basis en CSS

La propiedad .flex-basis es una subproperiedad del módulo de diseño de caja flexible. Especifica el tamaño inicial del elemento flexible, antes de que cualquier espacio disponible se distribuya de acuerdo con los factores flexibles. Cuando se omite desde la taquigrafía flexible, su valor especificado es la longitud cero.

Ejemplo de empleo : propiedad CSS flex-basis

Si quieres utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de la siguiente forma:

.element {
  flex-basis: 100px;
}

Otro ejemplo más avanzado de .flex-basis es el siguiente de CODEPEN:

Sintaxis de .flex-basis en CSS

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

Valores

Valor Descripción Juegalo
número Una unidad de longitud, o porcentaje, que especifica la longitud inicial de los artículos flexibles
auto Valor por defecto. La longitud es igual a la longitud del elemento flexible. Si el artículo no tiene una longitud especificada, la longitud será de acuerdo con su contenido
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento padre.

Exploradores compatibles con .flex-basis

Los números de la tabla especifican la primera versión del navegador que es plenamente compatible con la propiedad.

Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
flex-direction 29.0
21.0 -webkit-
11.0 28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

Referencias técnicas

Puede que también te interesen estas otras propiedades de CSS

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso

Otros artículos que te podrían interesar: