Exemplo
Definir a direção dos itens flexíveis dentro do <div> elemento na ordem inversa:
div
{
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
Tente você mesmo " Definição e Uso
A propriedade flex-direction especifica a direção dos itens flexíveis.
Note: Se o elemento não é um item flexível, a propriedade flex-direção não tem efeito.
| Valor padrão: | row |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.flexDirection="column-reverse" 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 | |||||
|---|---|---|---|---|---|
| flex-direction | 29,0 21,0 -webkit- | 11.0 | 28,0 18,0 -moz- | 9 6.1 -webkit- | 17,0 |
CSS Syntax
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| row | Valor padrão. Os itens flexíveis são exibidas horizontalmente, como uma linha | Jogue " |
| row-reverse | Igual a linha, mas na ordem inversa | Jogue " |
| column | Os itens flexíveis são apresentadas na vertical, como uma coluna | Jogue " |
| column-reverse | O mesmo da coluna, mas na ordem inversa | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
CSS Referência: flex-flow property
CSS Referência: flex-wrap property
CSS Referência: flex property
CSS Referência: flex-grow property
CSS Referência: flex-shrink property
CSS Referência: flex-basis property
HTML DOM de referência: flexDirection property