flexbox order propriedade reordenar
A propriedade `order` recebe um número inteiro (positivo, negativo ou zero, o padrão de todo item) e reordena os itens flex visualmente do menor para o maior valor, sem alterar a ordem real dos elementos no HTML. É a ferramenta clássica para, por exemplo, mostrar uma imagem antes do texto em telas grandes e depois do texto em mobile, sem duplicar marcação.
A imagem some da ordem 1 (padrão do HTML) e passa para -1 (antes de tudo) só na media query mobile.
order: -1 é sempre menor que o padrão 0, então esse item pula para o início sem tocar nos outros.
justify-content alinha os itens ao longo do eixo principal (definido por flex-direction), align-items alinha ao longo do eixo cruzado, perpendicular ao principal. Em `flex-direction: row`, justify-content controla o alinhamento horizontal e align-items o vertical, em `column` os dois se invertem.
Não. Leitores de tela seguem a ordem do DOM (a ordem real do HTML), não a ordem visual definida por order. Usar order para reorganizar conteúdo de forma que a leitura em voz alta não faça mais sentido é um problema real de acessibilidade a se evitar.
Tecnicamente não, aceita qualquer inteiro dentro do range de 32-bit signed integer do CSS. Na prática, a maioria dos casos de uso real fica entre -1 e o número de itens, valores muito grandes (como 9999) não têm vantagem sobre um valor pequeno que já seja maior que os demais.
Sim, order é uma propriedade compartilhada entre Flexbox e Grid com o mesmo comportamento visual (reordena sem mudar o DOM). Em Grid, ela interage com o posicionamento automático de itens sem grid-column/grid-row explícitos.
Clique em um item para editá-lo, arraste para reordenar (altera o order de cada item).
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}O CSS é gerado localmente no navegador.