CSS propriedade order

Definição e uso

O atributo order define a ordem dos itens flexíveis em relação aos outros itens flexíveis dentro do mesmo contêiner.

Comentário:Se o elemento não for um item flexível, o atributo order é inválido.

Veja também:

Manual do CSS:Atributo flex

Manual do CSS:Atributo flex-basis

Manual do CSS:Atributo flex-direction

Manual do CSS:Atributo flex-flow

Manual do CSS:Atributo flex-grow

Manual do CSS:Atributo flex-shrink

Manual do CSS:Atributo flex-wrap

Manual do CSS:Atributo align-content

Manual do CSS:Atributo align-items

Manual do CSS:Atributo align-self

Manual do HTML DOM:Atributo order

Exemplo

Defina a ordem dos itens flexíveis:

div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}

Experimente você mesmo

Sintaxe do CSS

order: number|initial|inherit;

Valor do atributo

Valor Descrição
number O valor padrão é 0. Define a ordem dos itens flexíveis.
initial Defina essa propriedade para seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: 0
Herança: não
Produção de animação: Suportado. Veja os atributos separados. Veja:Atributos relacionados a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.order="2"

Suporte do navegador

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

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

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