CSS Academy · Aula

Flex Grow, Shrink e Basis

Controle como os itens flexíveis crescem e encolhem e defina seu tamanho base usando a abreviação flex.

Aula 4 de 413 etapas

Flex Grow, Shrink e Basis é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

A abreviação flex

A abreviação flex nos itens flexíveis define três valores: flex-grow, flex-shrink e flex-basis.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis define o tamanho inicial de um item flexível antes que ele cresça ou encolha. Ele substitui a largura (na direção de linha). auto usa a largura do item ou o tamanho do conteúdo.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow determina quanto um item cresce em relação aos itens irmãos quando há espaço disponível. Um valor 0 significa que não haverá crescimento. Valores maiores recebem proporcionalmente mais espaço.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

Exemplo de flex-grow

Se um contêiner tiver 300px de espaço livre e dois itens com flex-grow 1 e 2, o primeiro receberá 100px adicionais, e o segundo receberá 200px adicionais (proporção de 1:2).

flex-shrink

flex-shrink controla quanto um item encolhe quando não há espaço suficiente. O padrão é 1 (todos os itens encolhem igualmente). O valor 0 impede o encolhimento.

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

Valores comuns da abreviação flex

Memorize estes padrões comuns:

flex: 1 = cresce e encolhe igualmente, com base 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto (rígido)
flex: 0 0 200px = 200px fixos, sem crescimento ou encolhimento

flex: 1 — distribuição igual

Definir flex: 1 em todos os filhos divide igualmente o espaço disponível. A base se torna 0%, então os itens crescem a partir de zero e dividem o espaço proporcionalmente.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis versus width

flex-basis tem precedência sobre width na direção do eixo principal. Se você definir ambos, flex-basis prevalecerá (a menos que seja auto, caso em que ele usará o valor de width).

Dimensionamento intrínseco versus extrínseco

Quando flex-basis: 0 (como em flex: 1), o item começa em 0 e cresce proporcionalmente — uma verdadeira distribuição proporcional. Com flex-basis: auto, os itens começam com seu tamanho natural de conteúdo e depois crescem.

Padrão da trindade

Uma disposição clássica com barra lateral fixa + área principal flexível + barra lateral fixa:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

min-width e max-width com flex

Use min-width e max-width junto com flex-grow para controlar os limites de crescimento:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

Verificação rápida

Um item tem flex: 0 0 200px. O que isso significa?

Responda na aula interativa

Recapitulação

flex-grow distribui o espaço extra proporcionalmente. flex-shrink controla como os itens são comprimidos. flex-basis define o tamanho inicial. A abreviação flex: 1 permite distribuir o espaço igualmente. Use flex: 0 0 Xpx para itens de tamanho fixo e flex: 1 para itens flexíveis no mesmo contêiner.

Grátis para começar

Aprenda CSS com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 40
Aulas: 159

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Flex Grow, Shrink e Basis” é grátis?

Sim — o texto completo de “Flex Grow, Shrink e Basis” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Flex Grow, Shrink e Basis”?

Controle como os itens flexíveis crescem e encolhem e defina seu tamanho base usando a abreviação flex. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Flex Grow, Shrink e Basis”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para CSS Academy