Propriedade order

A propriedade order define a ordem de um bloco flex individual dentro do contêiner flex. Aplica-se a um bloco flex específico.

O valor da propriedade é um número inteiro positivo ou negativo. Quanto menor o número, mais cedo o elemento será posicionado, independentemente de sua localização no código HTML em relação aos outros elementos.

Sintaxe

seletor {
	order: número positivo ou negativo;
}

Exemplo

Neste exemplo, a ordem de disposição de todos os blocos é definida usando order. O primeiro bloco será aquele com order negativo -1, depois com order 1 e assim por diante em ordem crescente:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
	<div id="elem6">6</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
}
#parent > div {
	border: 1px solid #696989;
	min-width: 100px;
}
#elem1 {
	order: 4;
}
#elem2 {
	order: 5;
}
#elem3 {
	order: 3;
}
#elem4 {
	order: 2;
}
#elem5 {
	order: 1;
}
#elem6 {
	order: -1;
}

Veja também

propriedade flex-direction,
que define a direção dos eixos dos blocos flex
propriedade justify-content,
que define o alinhamento ao longo do eixo principal
propriedade align-items,
que define o alinhamento ao longo do eixo transversal
propriedade flex-wrap,
que define a quebra de linha dos blocos flex
propriedade flex-flow,
abreviação para flex-direction e flex-wrap
propriedade align-self,
que define o alinhamento de um único bloco
propriedade flex-basis,
que define o tamanho de um bloco flex específico
propriedade flex-grow,
que define a capacidade de expansão dos blocos flex
propriedade flex-shrink,
que define a capacidade de redução dos blocos flex
propriedade flex,
abreviação para flex-grow, flex-shrink e flex-basis