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.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| flex-direction | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
