Propriedade Order
Última atualização: 2026-09-13
order Propriedade Order
A propriedade order define a ordem de exibição dos itens flex dentro de um contêiner. Seu valor padrão é 0. Itens com valores menores aparecem primeiro; itens com valores iguais são ordenados por sua posição no DOM. A propriedade muda apenas a ordem visual, nunca a estrutura do DOM, então também afeta a ordem de leitura dos leitores de tela e a ordem de foco da tecla Tab. Use-a com cuidado.
| Categoria | |
|---|---|
| Valor Inicial | 0 |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
order: <integer>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<integer> | Tipo | Ordem de exibição dos itens flex |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| order | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： O order aceita valores inteiros, incluindo números negativos. Todos os itens têm o padrão 0; um valor negativo empurra um item para a frente e um valor positivo o move para trás.
Aviso： O order altera a ordem do leitor de tela e do foco do teclado, que pode não corresponder mais à ordem do DOM e afeta a acessibilidade. Use-o apenas para ajustes puramente visuais e evite reordenar conteúdo que tenha significado lógico.
❓ Perguntas Frequentes
QO order muda a ordem do DOM?
ANão. O order muda apenas a apresentação visual; a estrutura do DOM permanece intocada, então a iteração de nós em JavaScript, a ordem de leitura do leitor de tela e a ordem de foco da tecla Tab ainda seguem a ordem original do DOM. O efeito é puramente visual e não altera como a página é serializada, então mecanismos de busca e tecnologias assistivas ainda veem a sequência do DOM. Se os itens forem links ou controles de formulário, uma ordem visual diferente da ordem de foco pode confundir os usuários, então avalie o impacto na acessibilidade antes de usá-lo.
QComo o order é útil em layouts responsivos?
ACombinado com media queries, o order permite alterar a ordem de exibição sem tocar no HTML: por exemplo, no mobile o conteúdo principal vai primeiro e a barra lateral depois, enquanto no desktop a ordem original é restaurada. Uma regra típica é @media (max-width: 768px) { .sidebar { order: 1 } }. Ele serve a layouts cuja ordem de conteúdo muda por dispositivo, mas evite o uso excessivo — uma reordenação pesada prejudica a legibilidade do código.
QEm que ordem são organizados os itens com o mesmo valor de order?
AOs itens são primeiro ordenados pelo valor de order do menor para o maior; quando os valores são iguais, são organizados pela ordem de escrita no DOM. O order padrão é 0, e os valores negativos vêm antes dos itens regulares, então order: -1 move um item para a frente extrema enquanto order: 1 o move para trás. Na prática, use order com moderação em itens individuais e evite construir um esquema de ordenação entre muitos itens, o que se torna difícil de entender.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade de Layout Flex
Aprenda o atalho central do layout flex
Direção do Eixo Principal
Inverte a ordem dos itens com row-reverse ou column-reverse
