Propriedade order e Reordenação Visual
Altere a ordem visual dos itens flex sem modificar o DOM usando a propriedade order.
Propriedade order e Reordenação Visual é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
A propriedade order
A propriedade order altera a ordem visual de itens flexíveis e de Grid sem modificar a estrutura do DOM. O padrão é 0; valores maiores aparecem depois; valores negativos aparecem antes.
Fundamentos de order
Os itens são exibidos do menor para o maior valor de order. Itens com o mesmo valor de order aparecem na ordem do DOM.
<div class="nav">
<span class="nav-button">Button</span>
<span class="nav-logo">Logo</span>
<span class="nav-links">Links</span>
</div>
order negativo
Utilize valores negativos para mover um item para antes de todos os itens padrão (order:0):
<div class="list">
<div>Item 1</div>
<div class="sticky-first">Sticky</div>
<div>Item 2</div>
</div>
Reordenação responsiva
Altere a ordem visual em diferentes pontos de interrupção sem modificar o HTML:
<div class="layout">
<main class="main-content">Main</main>
<aside class="sidebar">Sidebar</aside>
</div>
Importante: aviso de acessibilidade
order altera apenas a ordem visual. Leitores de tela e a navegação pelo teclado seguem a ordem do DOM, não a ordem visual. Reordenar visualmente os itens mantendo o DOM em uma ordem lógica de leitura é essencial para a acessibilidade.
Inconsistência na ordem das tabulações
Se você reordenar itens visualmente com order, o foco da tecla Tab seguirá a ordem do DOM, que pode ser diferente da ordem visual. Isso cria uma navegação confusa para usuários de teclado. Utilize a reordenação visual somente quando ela não quebrar a sequência lógica.
Casos de uso legítimos comuns
A reordenação visual é aceitável quando:
- Os itens não fazem parte de uma sequência navegável (ordenação decorativa)
- A ordem visual corresponde a um fluxo natural de leitura que difere da ordem do código-fonte por razões de organização do código
order no Flexbox e no Grid
A propriedade order funciona da mesma forma no Flexbox e no CSS Grid. Ela controla a ordem dentro do algoritmo de disposição, não do DOM.
order com Flex-wrap
Quando os itens passam para novas linhas, order determina quais itens aparecem em cada linha e em que sequência dentro de cada linha.
Invertendo todos os itens
Para inverter todos os itens, use flex-direction: row-reverse ou column-reverse em vez de definir valores negativos de ordem em cada item. Isso é mais semântico e simples.
<div class="reversed-list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Animação com reordenação
As alterações na ordem não podem ser animadas em CSS. Se precisar de reordenação animada, use transformações ou animações conduzidas por JavaScript, como Flip.js ou o plug-in Flip do GSAP.
Verificação rápida
Por que o uso da propriedade order para reordenar links de navegação deve ser feito com cautela?
Recapitulação
order altera a posição visual dos itens de flex/grade sem modificar o HTML. O padrão é 0; valores menores aparecem primeiro; valores maiores, por último. Use-o para reordenar de forma responsiva sem alterar a estrutura do DOM. Ao usar a propriedade order para reordenar, verifique sempre se a navegação pelo teclado e a ordem no leitor de tela continuam lógicas.
Perguntas Frequentes
A aula “Propriedade order e Reordenação Visual” é grátis?
Sim — o texto completo de “Propriedade order e Reordenação Visual” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Propriedade order e Reordenação Visual”?
Altere a ordem visual dos itens flex sem modificar o DOM usando a propriedade order. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Propriedade order e Reordenação Visual”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Substituição do Alinhamento de Itens Flex com align-self
- Propriedade order e Reordenação Visual
- Padrões da Forma Abreviada de flex
- Layouts Flexbox Comuns: Navegação, Cartões e Objetos de Mídia