Propriedade CSS order
Use a propriedade CSS order para definir a ordem de um elemento em um contêiner flexível. Veja os valores e exemplos práticos.
A propriedade order controla a posição de um item flex ou grid ao longo de sua trilha, permitindo alterar a ordem visual dos itens sem modificar a ordem no HTML. Ela faz parte do módulo Flexible Box Layout e é uma das propriedades do CSS3.
Por padrão, cada item possui order: 0, portanto os itens aparecem na ordem do código-fonte. Os itens são dispostos em ordem crescente de valor order; itens com o mesmo order mantêm a ordem do código-fonte entre si. Isso torna o order útil para tarefas como mover uma barra lateral antes do conteúdo principal em telas largas, ou reordenar cartões dentro de um layout flexbox ou CSS Grid, sem alterar a marcação.
order afeta apenas filhos diretos de um contêiner flex ou grid. Se o elemento não for um item flex ou grid, order não terá efeito.
Como os valores funcionam
order aceita qualquer número inteiro, incluindo valores negativos:
- Um item com
ordermenor aparece primeiro; umordermaior aparece depois. - Como o valor inicial é
0, definir um item como-1é uma forma rápida de movê-lo antes de todos os outros. - Itens que compartilham o mesmo valor de
ordervoltam à ordem do DOM, portanto geralmente você só precisa definirordernos poucos itens que deseja mover.
.first { order: -1; } /* moves before all default (0) items */
.middle { order: 0; } /* default, can be omitted */
.last { order: 1; } /* moves after all default items */Considerações de acessibilidade
order cria uma desconexão entre a exibição visual do conteúdo e sua ordem no DOM. A reordenação visual não altera o DOM, portanto não modifica a ordem de leitura para leitores de tela nem a ordem de tabulação para usuários de teclado. Alguém navegando pela página com a tecla Tab ou usando um leitor de tela seguirá a ordem original do código-fonte, e não o layout reordenado — o que pode ser confuso se os dois diferirem significativamente. Mantenha o DOM em uma ordem de leitura lógica e use order apenas para ajustes de apresentação.
| Valor inicial | 0 |
|---|---|
| Aplica-se a | Itens flex e itens grid. |
| Herdado | Não. |
| Animável | Não. A propriedade order é discreta e não é animável. |
| Versão | CSS3 |
| Sintaxe DOM | Object.style.order = "4"; |
Sintaxe
Sintaxe CSS de order
order: number | initial | inherit;Exemplo da propriedade order:
Exemplo de código CSS com order
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 400px;
height: 200px;
border: 1px solid #000;
display: flex;
}
#example div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 30px;
font-family: sans-serif;
}
div#blue {
order: 2;
}
div#green {
order: 3;
}
div#grey {
order: 1;
}
div#yellow {
order: 4;
}
</style>
</head>
<body>
<h2>Order property example</h2>
<div id="example">
<div style="background-color: #1c87c9;" id="blue">1</div>
<div style="background-color: #8ebf42;" id="green">2</div>
<div style="background-color: #666;" id="grey">3</div>
<div style="background-color: #f4f442;" id="yellow">4</div>
</div>
</body>
</html>Resultado
Exemplo da propriedade order aplicada à classe container:
Exemplo CSS de order com flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
}
.box:nth-of-type(1) {
order: 4;
}
.box:nth-of-type(2) {
order: 1;
}
.box:nth-of-type(3) {
order: 3;
}
.box:nth-of-type(4) {
order: 5;
}
.box:nth-of-type(5) {
order: 2;
}
.box {
background: #1c87c9;
padding: 5px;
width: 100px;
height: 100px;
margin: 5px;
line-height: 100px;
color: #eee;
font-weight: bold;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<h2>Order property</h2>
<ul class="container">
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
</ul>
</body>
</html>Em ambos os exemplos, a propriedade order reorganiza os itens na tela enquanto o HTML permanece em sua sequência original — cada item recebe simplesmente o número que o posiciona onde você deseja.
order é uma das várias ferramentas de alinhamento do flexbox. Combine-o com flex-direction para definir o eixo principal, justify-content para espaçar os itens ao longo desse eixo e align-items para alinhá-los no eixo transversal.
Valores
| Valor | Descrição |
|---|---|
| number | Define a ordem do item flex ou grid no contêiner. O valor padrão é 0. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |