Pedido - CSS-Tricks

Anonim

A orderpropriedade é uma subpropriedade do módulo Layout de caixa flexível.

Os itens flexíveis são exibidos na mesma ordem em que aparecem no documento de origem por padrão. A orderpropriedade pode ser usada para alterar essa ordem.

Sintaxe

order: .flex-item ( order: 2; )

Demo

A demonstração a seguir mostra como a ordem padrão (1, 2, 3, 4, 5) foi alterada definindo a propriedade de pedido para cada item.

Confira esta Caneta!

Suporte para navegador

  • (moderno) significa a sintaxe recente da especificação (por exemplo display: flex;)
  • (híbrido) significa uma sintaxe não oficial estranha de 2011 (por exemplo display: flexbox;)
  • (antigo) significa a sintaxe antiga de 2009 (por exemplo display: box;)
cromada Safári Raposa de fogo Ópera IE Android iOS
21+ (moderno)
20- (antigo)
3.1+ (antigo) 2-21 (antigo)
22+ (novo)
12,1+ (moderno) 10+ (híbrido) 2.1+ (antigo) 3.2+ (antigo)

O navegador Blackberry 10+ suporta a nova sintaxe.

Para obter mais informações sobre como misturar sintaxes para obter o melhor suporte do navegador, consulte este artigo (CSS-Tricks) ou este artigo (DevOpera).