Ordenação de Elementos

O Flexbox também permite que você reordene visualmente os elementos dentro do Flex Container sem modificar a estrutura do HTML.

A propriedade order define a ordem de exibição dos itens. Por exemplo:

.item {
  order: 2;
}

Neste caso, o elemento com a classe .item será exibido como o segundo item, independentemente de sua posição no HTML original.

Com um exemplo tudo fica mais fácil:

Imagine que você tem uma lista de artigos em uma página e deseja que um artigo específico apareça no topo, independentemente de sua posição no HTML.

HTML

<!-- HTML -->
<div class="article-list">
  <div class="article">Artigo 1</div>
  <div class="article">Artigo 2</div>
  <div class="article featured-article">Artigo Destacado</div>
  <div class="article">Artigo 3</div>
</div>

CSS

/* CSS */
.article-list {
  display: flex;
  flex-direction: column;
}

.featured-article {
  order: -1; /* Move o artigo para o topo */
}

Neste exemplo, definimos a classe featured-article com order: -1;, o que faz com que o artigo destacado seja exibido no topo da lista, independentemente de sua posição original no HTML.

Visualização da propriedade order:

Compartilhar

Compartilhar

Siga-me