Atributo flex-direction do CSS

Definição e uso

A propriedade flex-direction define a direção dos itens elásticos.

Nota:Se o elemento não for um item elástico, a propriedade flex é inválida.

Veja também:

Tutorial CSS:Caixa flexível CSS

Manual CSS:Propriedade flex

Manual CSS:Propriedade flex-basis

Manual CSS:Propriedade flex-flow

Manual CSS:Propriedade flex-grow

Manual CSS:Propriedade flex-shrink

Manual CSS:Propriedade flex-wrap

Manual HTML DOM:Propriedade flexDirection

Exemplo

Defina a direção dos itens flexíveis dentro do elemento <div> em ordem inversa:

div {
  display: flex;
  flex-direction: row-reverse; 
}

Experimente você mesmo

Sintaxe CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Valor do atributo

Valor Descrição
row Valor padrão. Como uma linha, exibe horizontalmente os itens flexíveis.
row-reverse Iguais a linhas, mas na direção oposta.
column Como colunas, exibe verticalmente os itens flexíveis.
column-reverse Iguais a colunas, mas na direção oposta.
initial Defina essa propriedade como seu valor padrão. Veja initial。
inherit Herda essa propriedade do elemento pai. Veja inherit。

Detalhes técnicos

Valor padrão: row
Herança: Não
Criação de animação: Não suportado. Veja:Propriedades relacionadas a animação。
Versão: CSS3
Sintaxe JavaScript: object.style.flexDirection="column-reverse"

Mais exemplos

Combine flex-direction e media queries para criar diferentes layouts para diferentes tamanhos de tela/dispositivos:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Layout responsivo - cria uma única coluna (100％) em vez de duas colunas (50％) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Experimente você mesmo

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Números com -webkit- ou -moz- indicam a primeira versão com prefixo usada.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0