Propriedade Flex Basis
Última atualização: 2026-09-13
flex-basis Propriedade Flex Basis
A propriedade flex-basis define o tamanho principal inicial de um item flex antes de o espaço restante ser distribuído — o “tamanho ideal” do item. Seu valor padrão é auto, que dimensiona o item a partir de seu conteúdo ou de uma width/height definida. Quando usa-se um comprimento específico, o item parte desse tamanho e então cresce ou encolhe de acordo com flex-grow e flex-shrink.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
flex-basis: auto | content | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | content | Palavra-chave | Determinado por auto ou content |
<length> | <percentage> | Tipo | Tamanho base fixo |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-basis | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： Quando flex-basis é 0, todos os itens começam de um tamanho base 0 e todo o espaço é distribuído puramente por flex-grow — a receita padrão para layouts de colunas de largura igual.
Importante： O flex-basis tem prioridade maior que width/height, mas menor que max-width/max-height e min-width/min-height. Quando flex-basis e width são definidos juntos, flex-basis vence.
❓ Perguntas Frequentes
QQual é a diferença entre flex-basis e width?
AEm um layout flex, flex-basis tem prioridade maior que width: ele determina o tamanho inicial do item no eixo principal e participa do cálculo de crescer/encolher, enquanto width só se aplica quando flex-basis é auto. O flex-basis também alimenta o tamanho base em flex-grow e flex-shrink, o que uma width comum nunca faz. Recomenda-se definir o tamanho base dos itens flex com flex-basis e deixar width para contextos não flex.
QQual é a diferença entre flex-basis: auto e flex-basis: content?
Aauto dimensiona o item a partir de seu conteúdo ou de uma width/height explícita, o que for aplicável; content o dimensiona puramente a partir do conteúdo, ignorando quaisquer configurações de width/height. A palavra-chave content tem suporte mais fraco nos navegadores e pode se comportar de forma diferente quando o item não tem texto ou contém conteúdo substituído, então auto é a escolha recomendada em projetos reais — seu comportamento é suficiente na maioria das situações. Se você realmente precisa de dimensionamento baseado em conteúdo que auto não expressa, teste a palavra-chave content nos navegadores de destino primeiro.
QQual é a diferença entre flex-basis: 0 e flex-basis: auto?
Aflex-basis: auto usa o conteúdo ou width como tamanho base, então itens com conteúdo diferente começam em larguras diferentes e apenas o espaço restante é compartilhado por flex-grow. flex-basis: 0 zera a largura base, então todo o espaço é distribuído proporcionalmente e as colunas ficam estritamente iguais. flex: 1 se expande para 1 1 0%, enquanto flex: auto se expande para 1 1 auto; os dois se comportam de forma muito diferente.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Atalho Flex
Atalho para flex-grow, flex-shrink e flex-basis
Flex Grow
Controla quanto um item flex cresce
