Manual de Referência CSS

Regra @ do CSS (RULES)

大全 de Atributos CSS

CSS3 flex-Atributo wrap CSS3 flex-Atributo grow

CSS3 flex-Método de uso e exemplo do atributo shrink

flex-O atributo shrink do CSS especifica o modo de contração do item flexível em relação aos outros itens dentro do contêiner flexível.

A tabela a seguir fornece uma descrição de uso e histórico de versão desse atributo, bem como a sintaxe de uso no script JavaScript.

Valor padrão:	1
Aplicável a:	Elementos flexíveis
Herança:	não
Animável:	é.Por favor, consulte Atributos de animação.
Versão:	CSS3nova funcionalidade
Sintaxe de JavaScript:	object.style.flexShrink="5"

flex-Sintaxe de uso do shrink

A sintaxe dessa propriedade é a seguinte:

flex-shrink: number | initial | inherit

O exemplo a seguir demonstra como usar o flex-Atributo shrink

Exemplo

.flex-container　{
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-flex-shrink:　1;　/*　Safari　6.1+　*/
　　　　flex-shrink:　1;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-flex-shrink:　3;　/*　Safari　6.1+　*/
　　　　flex-shrink:　3;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
　　　　-webkit-flex-shrink:　5;　/*　Safari　6.1+　*/
　　　　flex-shrink:　5;
}

Teste e veja‹/›

Valores do atributo

A tabela a seguir descreve os valores desse atributo.

Valor	Descrição
number	Um número positivo usado para determinar o flex-Coeficiente do shrink do item flexível. O valor padrão é1.Números negativos não são válidos.
initial	Defina essa propriedade para seu valor padrão.
inherit	Se especificado, o elemento relacionado usa o flex do pai-Valores do atributo shrink.

Compatibilidade do navegador

flex-Compatibilidade do navegador do atributo shrink, os números na tabela a seguir representam a versão mínima do navegador que suporta esse atributo; todos os navegadores populares suportam esse atributo.

	Firefox18+ ^-moz-,28+ Google Chrome 21+ ^-webkit-,29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+