Propriedade CSS flex-basis

A propriedade flex-basis especifica o tamanho inicial do eixo principal de um item flexível — o tamanho que ele recebe antes de qualquer espaço livre ser distribuído pelo flex-grow ou removido pelo flex-shrink. Quando essa propriedade não é especificada, seu valor inicial é auto.

A propriedade flex-basis é uma das propriedades CSS3 e só tem efeito nos filhos de um contêiner flex (um elemento com display: flex ou display: inline-flex). Se o pai não for um contêiner flex, flex-basis não terá efeito.

Por que usar flex-basis?

Em um layout Flexbox, o tamanho de um item é calculado em duas etapas:

O navegador lê o flex-basis do item para definir um tamanho inicial ao longo do eixo principal.
Em seguida, ele cresce ou encolhe cada item a partir desse tamanho inicial para preencher (ou caber dentro de) o contêiner, de acordo com flex-grow e flex-shrink.

Use flex-basis quando quiser definir o tamanho ideal de um item, mas ainda permitir que ele seja flexível. Por exemplo, flex-basis: 200px significa "buscar 200px e crescer/encolher a partir daí", enquanto width: 200px é um tamanho fixo que o Flexbox reluta em substituir.

flex-basis vs. width

Quando flex-basis é definido como um comprimento ou porcentagem, ele tem precedência sobre width (ou height, se flex-direction for column) para determinar o tamanho inicial do eixo principal do item. A diferença fundamental: flex-basis sempre se aplica ao longo do eixo principal, portanto segue flex-direction. Com flex-direction: row, ele controla a largura; com flex-direction: column, controla a altura. Um simples width sempre controla o tamanho horizontal independentemente da direção.

Quando flex-basis: auto é usado, o item recorre ao seu width/height (ou ao tamanho do conteúdo, se esses não estiverem definidos).

Nota: O atalho flex define flex-basis junto com flex-grow e flex-shrink. Se você usar flex, ele terá precedência sobre uma declaração autônoma de flex-basis — portanto, coloque flex-basis depois de flex, ou use o atalho diretamente para evitar surpresas.

Valor Inicial	auto
Aplica-se a	Itens flex, incluindo pseudo-elementos no fluxo.
Herdado	Não.
Animável	Sim. Os itens são animáveis.
Versão	CSS3
Sintaxe DOM	object.style.flexBasis = "100px";

Sintaxe

Sintaxe da Propriedade CSS flex-basis

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

Exemplo básico

Exemplo da Propriedade 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>

Experimente Você Mesmo »

Resultado

Exemplo com todos os valores

Exemplo da propriedade flex-basis com todos os 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>

Experimente Você Mesmo »

Exemplo com valores em pixels

Exemplo da propriedade flex-basis especificada em pixels:

<!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>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
length \| percentage	Um comprimento absoluto (`px`, `em`, `rem`) ou uma porcentagem do tamanho principal do contêiner flex. Valores negativos são inválidos.	Experimente »
auto	O valor padrão. O item usa seu próprio `width`/`height` (ou o tamanho do conteúdo se não estiverem definidos) como base.	Experimente »
initial	Redefine a propriedade para seu valor padrão (`auto`).	Experimente »
inherit	Herda o valor do elemento pai.
min-content	Dimensiona o item para sua menor largura de conteúdo possível (a palavra ou elemento mais longo que não pode ser quebrado).	Experimente »
max-content	Dimensiona o item para sua maior largura de conteúdo, sem quebra de linha.	Experimente »
fit-content	Limita o tamanho entre `min-content` e `max-content`, como a função `fit-content()`.	Experimente »
content	Dimensiona o item com base em seu conteúdo, ignorando qualquer `width`/`height` definido. Suporte limitado nos navegadores.	Experimente »

Problemas comuns

flex-basis não tem efeito fora de um contêiner flex. O pai deve ter display: flex ou display: inline-flex.
Um flex-basis de 0 (ou 0%) combinado com flex-grow: 1 distribui o espaço proporcionalmente apenas pelo fator de crescimento, ignorando o tamanho do conteúdo — é assim que muitos layouts de "colunas iguais" funcionam.
As porcentagens são resolvidas em relação ao tamanho principal do contêiner, não ao viewport. Se o contêiner não tiver um tamanho definido no eixo principal, um flex-basis percentual pode se comportar como auto.
O atalho flex substitui flex-basis. Escrever flex: 1 redefine a base para 0%, o que pode substituir uma declaração anterior de flex-basis.

Propriedades relacionadas

flex — o atalho para flex-grow, flex-shrink e flex-basis.
flex-grow — o quanto um item cresce além de sua base.
flex-shrink — o quanto um item encolhe abaixo de sua base.
O Guia Definitivo do Flexbox — o modelo completo do Flexbox em um só lugar.

Prática

O que a propriedade 'flex-basis' faz no CSS?

Ela define o tamanho de um item flex.Ela altera a cor de um item flex.Ela define o tamanho inicial do eixo principal de um item flex.Ela controla totalmente a ordenação dos itens flex.Ela exclui um item flex.