Exemplo
Definir a ordem dos itens flexíveis:
/* Code for Safari 6.1 to 8.0 */
div#myRedDIV {-webkit-order: 2;}
div#myBlueDIV {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV {-webkit-order: 1;}
/* Standard syntax */
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV
{order: 3;}
div#myPinkDIV {order: 1;}
Tente você mesmo " Definição e Uso
A propriedade de ordem especifica a ordem de um elemento flexível em relação ao resto dos elementos flexíveis no interior do mesmo recipiente.
Note: Se o elemento não é um item flexível, a propriedade de ordem não tem efeito.
| Valor padrão: | 0 |
|---|---|
| Herdado: | no |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.order="2" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| order | 29,0 21,0 -webkit- | 11.0 | 28,0 18,0 -moz- | 9 6.1 -webkit- | 17,0 |
CSS Syntax
order:number|initial|inherit;Valores de propriedade
| Valor | Descrição |
|---|---|
| number | O valor padrão 0. Especifica a ordem para o item flexível |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
CSS Referência: flex property
CSS Referência: flex-basis property
CSS Referência: flex-direction property
CSS Referência: flex-flow property
CSS Referência: flex-grow property
CSS Referência: flex-shrink property
CSS Referência: flex-wrap property
CSS Referência: align-content property
CSS Referência: align-items property
CSS Referência: align-self property
Referência HTML DOM: order property