Características flex-basis en CSS

La propiedad flex-basis en CSS especifica el tamaño principal de un elemento flexible, y esta propiedad establece el tamaño del cuadro de contenido a menos que se especifique lo contrario mediante la propiedad box-sizing.

Funciones flex-basis css

Valor inicial	`auto`
Aplicado a	Elementos flexibles.
Heredable	No
Móvil	Sí
Valor calculado	Como se especifica, pero con longitudes relativas convertidas a absolutas.

/* ancho */ 
flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;
/* palabras reservadas */ 
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* Determinar las dimensiones del elemento en función de su contenido */ 
flex-basis: content;
/* valores globales */ 
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

Ejemplos y aplicaciones en código

Un ejemplo del uso de la propiedad flex-basis para establecer las dimensiones principales de los elementos flexibles. Tenga en cuenta que las dimensiones de la primera caja son 100px, y las dimensiones de la segunda caja son 20% del contenedor flexible:

< div  id = "content" > 
  < div  class = "box1" > A </ div > 
  < div  class = "box2" > B </ div > 
</ div >

Código CSS:

#content {
  display: flex;
  width: 500px;
}
#content div {
  border: 3px solid rgba(0,0,0,.2);
  padding: 0.25em;
}
.box1 {
  background-color: salmon;
  flex-basis: 100px;
}
.box2 {
  background-color: lightblue;
  flex-basis: 20%;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	29,0	20,0	11	12,5	9.0

Las versiones anteriores de algunos navegadores (por ejemplo, Chrome, IE, Safari) admitían flexbox pero con el uso de una versión anterior ( -webkit-o -ms-).

Características generales

La propiedad acepta flex-basis un valor único que es un ancho <width> o una palabra reservada content.

<width>

Un valor de longitud <length> o un porcentaje <percentage> relativo a las dimensiones principales del contenedor flexible principal del elemento. No se pueden utilizar valores negativos.

content

Este valor calcula automáticamente las dimensiones del elemento en función del contenido del elemento flexible.

Estructura flex-basis css

flex-basis: content | <'width'>;

Consulte también

Propiedad flex la página de sub-propiedades que esta conjuntos de propiedades son: flex-direction, flex-flow, flex-grow, flex-shrink y flex-wrap.
La página de cada una de las propiedades width, height que se encarga de configurar las dimensiones del elemento.
La página de propiedades position que describe cómo se debe colocar el elemento en el documento.