Propriedade CSS flex-shrink

A propriedade flex-shrink controla o quanto um item flex encolhe em relação aos outros itens no mesmo contêiner quando não há espaço suficiente para todos eles em seus tamanhos preferidos. Ela só tem efeito quando o tamanho combinado dos itens é maior que o contêiner — esse estouro é o "espaço negativo" que é redistribuído fazendo os itens encolherem.

O valor é um número sem unidade (um fator flex), não um comprimento. Um número maior significa que um item cede mais de sua largura (ou altura, em uma coluna) do que seus vizinhos. O padrão é 1, portanto, por padrão, todos os itens flex encolhem na mesma taxa. Defina como 0 para travar um item em seu flex-basis e impedir que ele encolha.

flex-shrink é o terceiro valor na abreviação flex (flex: grow shrink basis) e é uma das propriedades CSS3.

Informação

Quando o espaço negativo é distribuído, o fator flex-shrink de cada item é multiplicado pelo seu flex-basis (ou, quando flex-basis é auto, pelo tamanho do conteúdo do item). Essa ponderação significa que itens maiores encolhem mais do que os menores, mesmo quando seus fatores de encolhimento são iguais — isso evita que um item pequeno colapse para zero enquanto um grande mantém seu tamanho.

Como o encolhimento é calculado

Suponha que um contêiner flex tenha 400px de largura e contenha dois itens cujos valores de flex-basis somam 600px — há 200px de estouro a absorver. Se ambos os itens têm o mesmo flex-basis de 300px e fatores de encolhimento de 1 e 3, as parcelas ponderadas são 300×1 = 300 e 300×3 = 900, totalizando 1200. Cada item cede o estouro proporcionalmente à sua parcela:

O item A remove 200 × (300 / 1200) = 50px → fica com 250px.
O item B remove 200 × (900 / 1200) = 150px → fica com 150px.

Portanto, o item com flex-shrink: 3 perde três vezes mais largura do que o com flex-shrink: 1. As duas larguras finais somam de volta os 400px do contêiner.

Quando usar flex-shrink

Proteja um elemento fixo. Dê a uma barra lateral, logotipo ou ícone flex-shrink: 0 para que ele mantenha seu tamanho enquanto o conteúdo flexível ao redor encolhe.
Priorize o que encolhe primeiro. Aumente o fator em itens menos importantes para que eles colapsen antes do conteúdo principal.
Construa barras de ferramentas e barras de navegação flexíveis. Deixe os botões encolherem juntos à medida que o viewport estreita, em vez de transbordar ou quebrar linha. | Valor Inicial | 1 | |---|---| | 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.flexShrink = "4"; |

Sintaxe

Sintaxe da propriedade CSS flex-shrink

flex-shrink: number | initial | inherit;

Um número sem unidade define o fator flex; initial o redefine para 1 e inherit herda o valor do pai.

Exemplo da propriedade flex-shrink

No exemplo abaixo, todos os itens começam com um flex-basis de 100px (portanto, 500px de conteúdo compete por uma caixa de 320px). O segundo item tem flex-shrink: 7 enquanto os outros têm 3, então ele encolhe mais de duas vezes mais rápido e acaba sendo o mais estreito.

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

Experimente Você Mesmo »

Resultado

![Propriedade CSS flex-shrink](/uploads/media/default/0001/05/b413d578abc6b2c3b0a052506081df9c0183e432.png "CSS flex-shrink property example" =420x)

Impedindo que um item encolha

Defina flex-shrink: 0 para manter um item em seu tamanho base enquanto seus irmãos absorvem todo o estouro. Aqui a barra lateral mantém 200px de largura e apenas a área de conteúdo encolhe:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: flex;
        width: 320px;
        border: 1px dotted #666666;
      }
      .sidebar {
        flex-basis: 200px;
        flex-shrink: 0;        /* never shrinks */
        background-color: #1c87c9;
      }
      .content {
        flex-basis: 200px;
        flex-shrink: 1;        /* shrinks to make room */
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
    </div>
  </body>
</html>

As duas bases totalizam 400px em uma caixa de 320px, portanto 80px precisam ser removidos. Como a barra lateral se recusa a encolher, a área de conteúdo absorve todos os 80px e é renderizada com 120px.

Valores

Valor	Descrição	Experimente
number	Especifica o quanto o item encolherá em relação ao restante dos itens flexíveis do mesmo contêiner. O valor padrão é 1.	Experimente »
initial	Define a propriedade para seu valor padrão.	Experimente »
inherit	Herda esta propriedade de seu elemento pai.

Propriedades relacionadas

flex-shrink raramente funciona sozinha — é a contraparte das outras propriedades de dimensionamento do Flexbox:

flex-grow — o quanto um item cresce para preencher o espaço extra (a direção oposta).
flex-basis — o tamanho inicial do item antes de crescer ou encolher ser aplicado.
flex — a abreviação que define flex-grow, flex-shrink e flex-basis de uma só vez.
flex-wrap — quando os itens podem quebrar para uma nova linha em vez de encolher.
flex-direction — se o encolhimento ocorre ao longo da linha (largura) ou da coluna (altura).

Prática

Qual é a função da propriedade 'flex-shrink' no CSS?

Define a capacidade de um item flex crescer, se necessário.Especifica o alinhamento entre as linhas dentro de um contêiner flexível quando os itens não utilizam todo o espaço disponível.Define a capacidade de um item flex encolher, se necessário.Permite controlar como um contêiner flex é disposto ao longo do eixo transversal.Determina a ordem em que os itens flex são exibidos e dispostos dentro do contêiner flex.