Propiedad CSS flex-basis

La propiedad flex-basis especifica el tamaño principal inicial de un elemento flexible — el tamaño que obtiene antes de que cualquier espacio libre sea distribuido por flex-grow o reducido por flex-shrink. Cuando no se especifica esta propiedad, su valor inicial es auto.

La propiedad flex-basis es una de las propiedades CSS3 y solo tiene efecto en los hijos de un contenedor flex (un elemento con display: flex o display: inline-flex). Si el padre no es un contenedor flex, flex-basis no tiene efecto.

¿Por qué usar flex-basis?

En un diseño Flexbox el tamaño de un elemento se calcula en dos etapas:

El navegador lee el flex-basis del elemento para establecer un tamaño inicial a lo largo del eje principal.
Luego hace crecer o encoger cada elemento desde ese tamaño inicial para llenar (o caber dentro de) el contenedor, según flex-grow y flex-shrink.

Usa flex-basis cuando quieras establecer el tamaño ideal de un elemento pero aun así permitir que sea flexible. Por ejemplo, flex-basis: 200px significa "apunta a 200px, luego crece o encógete desde ahí," mientras que width: 200px es un tamaño fijo que Flexbox se resiste más a modificar.

flex-basis vs. width

Cuando flex-basis se establece con una longitud o porcentaje, tiene precedencia sobre width (o height, si flex-direction es column) para determinar el tamaño principal inicial del elemento. La diferencia clave: flex-basis siempre se aplica a lo largo del eje principal, por lo que sigue a flex-direction. Con flex-direction: row controla el ancho; con flex-direction: column controla la altura. Un simple width siempre controla el tamaño horizontal independientemente de la dirección.

Cuando se usa flex-basis: auto, el elemento recurre a su width/height (o a su tamaño de contenido si esos no están definidos).

Nota: El shorthand flex establece flex-basis junto con flex-grow y flex-shrink. Si escribes flex, tiene precedencia sobre una declaración independiente de flex-basis — así que pon flex-basis después de flex, o usa el shorthand directamente para evitar sorpresas.

Valor inicial	auto
Se aplica a	Elementos flex, incluidos pseudo-elementos en flujo.
Heredable	No.
Animable	Sí. Los elementos son animables.
Versión	CSS3
Sintaxis DOM	object.style.flexBasis = "100px";

Sintaxis

Sintaxis de la propiedad CSS flex-basis

flex-basis: length | percentage | auto | initial | inherit | min-content | max-content | fit-content | content;

Ejemplo básico

Ejemplo de la propiedad CSS flex-basis

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        height: 80px;
        border: 1px solid #666;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 40px;
      }
      .box div:nth-of-type(2) {
        flex-basis: 140px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;">40px</div>
      <div style="background-color: #1c87c9;">140px</div>
      <div style="background-color: #8ebf42;">40px</div>
      <div style="background-color: #cccccc;">40px</div>
      <div style="background-color: #666666;">40px</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo con todos los valores

Ejemplo de la propiedad flex-basis con todos los valores:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 60px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 40%;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        flex-basis: auto;
        background-color: yellow;
      }
      .box div:nth-of-type(4) {
        flex-basis: initial;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        flex-basis: inherit;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        number 60px
      </div>
      <div>
        percentage 40%
      </div>
      <div>
        auto
      </div>
      <div>
        initial
      </div>
      <div>
        inherit
      </div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con valores en píxeles

Ejemplo de la propiedad flex-basis especificada en píxeles:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 460px;
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 70px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 100px;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        background-color: #1c87c9;
      }
      .box div:nth-of-type(4) {
        flex-basis: 150px;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        70px
      </div>
      <div>
        100px
      </div>
      <div>
        70px
      </div>
      <div>
        150px
      </div>
      <div>
        70px
      </div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Pruébalo
length \| percentage	Una longitud absoluta (`px`, `em`, `rem`) o un porcentaje del tamaño principal del contenedor flex. Los valores negativos no son válidos.	Pruébalo »
auto	El valor predeterminado. El elemento usa su propio `width`/`height` (o el tamaño de contenido si esos no están definidos) como base.	Pruébalo »
initial	Restablece la propiedad a su valor predeterminado (`auto`).	Pruébalo »
inherit	Hereda el valor del elemento padre.
min-content	Dimensiona el elemento al ancho de contenido más pequeño posible (la palabra o elemento más largo que no se puede dividir).	Pruébalo »
max-content	Dimensiona el elemento al ancho de contenido más grande, sin ajuste de línea.	Pruébalo »
fit-content	Limita el tamaño entre `min-content` y `max-content`, como la función `fit-content()`.	Pruébalo »
content	Dimensiona el elemento según su contenido, ignorando cualquier `width`/`height` establecido. Soporte limitado en navegadores.	Pruébalo »

Problemas comunes

flex-basis no tiene efecto fuera de un contenedor flex. El padre debe tener display: flex o display: inline-flex.
Un flex-basis de 0 (o 0%) más flex-grow: 1 distribuye el espacio proporcionalmente solo por factor de crecimiento, ignorando el tamaño del contenido — así es como funcionan muchos diseños de "columnas iguales".
Los porcentajes se resuelven contra el tamaño principal del contenedor, no el viewport. Si el contenedor no tiene un tamaño definido en el eje principal, un flex-basis en porcentaje puede comportarse como auto.
El shorthand flex anula flex-basis. Escribir flex: 1 restablece la base a 0%, lo que puede anular una declaración anterior de flex-basis.

Propiedades relacionadas

flex — el shorthand para flex-grow, flex-shrink y flex-basis.
flex-grow — cuánto crece un elemento más allá de su base.
flex-shrink — cuánto se encoge un elemento por debajo de su base.
La guía definitiva de Flexbox — el modelo completo de Flexbox en un solo lugar.

Práctica

¿Qué hace la propiedad 'flex-basis' en CSS?

Define el tamaño de un elemento flex.Cambia el color de un elemento flex.Establece el tamaño principal inicial de un elemento flex.Controla completamente el orden de los elementos flex.Elimina un elemento flex.