Propriedade Flex Shrink
Última atualização: 2026-09-13
flex-shrink Propriedade Flex Shrink
A propriedade flex-shrink define o fator de encolhimento de um item flex, decidindo quanto o item encolhe quando o contêiner não tem espaço suficiente. Seu valor padrão é 1, o que significa que os itens encolhem conforme necessário. Um valor 0 mantém o item no seu tamanho original mesmo quando o espaço acaba. Valores maiores fazem o item encolher mais quando o espaço é apertado.
| Categoria | |
|---|---|
| Valor Inicial | 1 |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
flex-shrink: <number>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<number> | Tipo | Fator de encolhimento; 0 significa que o item não encolhe |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-shrink | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： O flex-shrink é uma proporção sem unidade e não aceita valores negativos. A quantidade de encolhimento é distribuída entre os itens na proporção de seus valores flex-shrink: se um item é 2 e outro é 1, o primeiro encolhe o dobro.
Aviso： O flex-shrink só tem efeito quando o contêiner fica sem espaço. Se a largura total dos itens não excede o contêiner, o flex-shrink não tem efeito e os itens mantêm seu tamanho original.
❓ Perguntas Frequentes
QQuais são os usos práticos de flex-shrink: 0?
AÉ comumente usado para elementos que precisam manter um tamanho fixo, como barras laterais, logotipos, botões de ícone e paginação. Esses elementos não são comprimidos quando o contêiner fica sem espaço, preservando a legibilidade e a área clicável. Uma combinação típica: a área de conteúdo usa flex-shrink: 1 para encolher de forma fluida, enquanto a barra lateral usa flex-shrink: 0 para permanecer fixa. Observe que o flex-shrink só entra em ação após o cálculo de flex-basis e dos tamanhos do conteúdo, então o elemento fixo precisa estar de fato mais largo que o contêiner para que o efeito seja visível.
QPor que meu item ainda é comprimido mesmo com flex-shrink: 0?
ACausas possíveis: um max-width ou min-width no item conflita com a configuração de encolhimento; o contêiner pai recorta o conteúdo com overflow: hidden em vez de encolher; ou flex-basis é auto e o item contém um texto longo e quebrável. Um erro comum é um atalho flex posterior, como flex: 1, redefinir flex-shrink de volta para 1, então verifique a ordem em cascata se a propriedade parecer ignorada. Verifique as declarações completas de tamanho do item e as configurações de overflow do pai, e certifique-se de que flex-shrink: 0 está escrito no próprio elemento.
QO que acontece quando flex-shrink: 1 e flex-shrink: 0 são misturados?
AQuando o espaço é apertado, os itens com maior valor de flex-shrink encolhem mais. Misturados, os itens com flex-shrink: 1 encolhem proporcionalmente enquanto os com flex-shrink: 0 mantêm seu tamanho, então os itens encolhíveis ficam ainda mais estreitos e seu conteúdo pode transbordar ou quebrar. Essa é exatamente a técnica de layout comum: a barra lateral permanece fixa com flex-shrink: 0 enquanto a área de conteúdo absorve o encolhimento com flex-shrink: 1.
🏷️ 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
