A flex-shrinkpropriedade é uma subpropriedade do módulo Layout de caixa flexível.
Ele especifica o “fator de redução do flex”, que determina o quanto o flex item encolherá em relação ao resto dos flex items no flex container quando não houver espaço suficiente na linha.
Quando omitido, é definido como 1e o fator de contração flexível é multiplicado pela base flexível ao distribuir o espaço negativo.
Sintaxe
flex-shrink: .flex-item ( flex-shrink: 2; )Demo
Para ver todo o potencial deste demo, você teria que ser capaz de redimensionar sua largura, portanto, dê uma olhada nele diretamente no CodePen.
Nesta demonstração:
- O primeiro item tem
flex: 1 1 20em(abreviação paraflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - O segundo elemento tem
flex: 2 2 20em(abreviada paraflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Ambos os itens flexíveis devem ter 20em de largura. Por causa do flex-grow (primeiro parâmetro), se o flex container for maior que 40em, o segundo filho ocupará o dobro do espaço restante do primeiro filho. Mas se o elemento pai tiver menos de 40em de largura, o segundo filho terá duas vezes mais raspado do que o primeiro filho, fazendo com que pareça menor (por causa do segundo parâmetro, flex-encolher).
Suporte para navegador
- (moderno) significa a sintaxe recente da especificação (por exemplo
display: flex;) - (híbrido) significa uma sintaxe não oficial estranha de 2011 (por exemplo
display: flexbox;) - (antigo) significa a sintaxe antiga de 2009 (por exemplo
display: box;)
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderno) 20- (antigo) | 3.1+ (antigo) | 2-21 (antigo) 22+ (novo) | 12,1+ (moderno) | 10+ (híbrido) | 2.1+ (antigo) | 3.2+ (antigo) |
O navegador Blackberry 10+ suporta a nova sintaxe.
Para obter mais informações sobre como misturar sintaxes para obter o melhor suporte do navegador, consulte este artigo (CSS-Tricks) ou este artigo (DevOpera).