Sobre a Aula
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
:
Entrar na conversa