Atributo flex do CSS

Definição e uso

Flex é uma abreviação das seguintes propriedades:

A configuração flex define o comprimento flexível do item flexível.

Comentário:Se o elemento não for um item flexível, a propriedade flex é inválida.

Veja também:

Tutorial: Caixa flexível do CSS

Referência:Atributo flex-basis do CSS

Referência:Atributo flex-direction do CSS

Referência:Atributo flex-flow do CSS

Referência:Atributo flex-grow do CSS

Referência:Atributo flex-shrink do CSS

Referência:Atributo flex-wrap do CSS

Referência:Propriedade flex do HTML DOM

Exemplo

Faça com que todos os itens flexíveis tenham o mesmo comprimento, independentemente do seu conteúdo:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

Experimente pessoalmente

Sintaxe do CSS

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Valor do atributo

Valor Descrição
flex-grow Número, que determina a quantidade de expansão do item em relação aos outros itens flexíveis.
flex-shrink Número, que determina a quantidade de contração do item em relação aos outros itens flexíveis.
flex-basis

Tamanho do item.

Valores válidos: "auto"、"inherit"，ou valores em unidade de "%", "px", "em" ou qualquer outra unidade de comprimento.
auto Igual a 1 1 auto.
initial Igual a 0 1 auto. Veja: initial。
none Igual a 0 0 auto.
inherit Herda essa propriedade do elemento pai. Veja: inherit。

Detalhes técnicos

Valor padrão: 0 1 auto
Herança: Não
Produção de animação: Suportado. Veja propriedades separadas. Veja:Propriedades relacionadas a animação。
Versão: CSS3
Sintaxe do JavaScript: object.style.flex="1"

Mais exemplos

Combine flex e media queries para criar diferentes layouts para diferentes tamanhos de tela/dispositivos:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* Layout responsivo - Crie uma única coluna (100％) em vez de um layout de duas colunas (50％) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Experimente pessoalmente

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Números com -webkit-、-ms- ou -moz- indicam a primeira versão com prefixo usada.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0