Propriedade de Direção do Eixo Principal
Última atualização: 2026-09-13
flex-direction Propriedade de Direção do Eixo Principal
A propriedade flex-direction define a direção do eixo principal em um container flex, ou seja, a direção na qual os itens flex são dispostos. Por padrão, os itens são organizados horizontalmente da esquerda para a direita (row). A propriedade pode mudar o layout para vertical ou para uma ordem reversa. É o controle de direção mais fundamental no flexbox e determina em qual eixo justify-content e align-items atuam.
| Categoria | |
|---|---|
| Valor Inicial | row |
| Herdado | Não |
| Aplica-se A | todos |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
flex-direction: row | row-reverse | column | column-reverse;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
row | row-reverse | column | column-reverse | Palavra-chave | Direção do eixo principal do flex. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-direction | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： row e row-reverse dispõem os itens em um eixo principal horizontal; column e column-reverse usam um eixo principal vertical. Quando o eixo principal muda, os eixos controlados por justify-content e align-items trocam de acordo.
Importante： row-reverse e column-reverse alteram apenas a ordem visual dos itens, não a ordem do DOM, então a ordem de leitura do leitor de tela e a ordem de foco da tecla Tab não são afetadas.
❓ Perguntas Frequentes
QComo justify-content e align-items se comportam quando flex-direction muda?
Aflex-direction define o eixo principal: justify-content atua no eixo principal e align-items no eixo cruzado. Com row, justify-content controla o alinhamento horizontal e align-items o vertical; após mudar para column, os dois eixos são trocados. Uma consequência prática: com column, o justify-content precisa de uma altura definida no container para distribuir espaço, assim como align-items precisa de espaço cruzado restante em row. Confirme sempre primeiro a direção do eixo principal, pois ele decide qual propriedade de alinhamento controla qual direção.
QComo criar um layout da direita para a esquerda?
AExistem duas formas. flex-direction: row-reverse dispõe os itens flex da direita para a esquerda e afeta apenas aquele conjunto de itens. Definir direction: rtl no container muda a direção de escrita e de layout, então o texto e os elementos inline também seguem. As duas parecem visualmente semelhantes, mas diferem semanticamente: prefira row-reverse quando apenas o layout deve ser invertido e use direction: rtl quando a direção do texto também precisa mudar.
QQual é a diferença entre flex-direction: column e writing-mode: vertical?
ASão completamente diferentes. flex-direction: column apenas empilha os itens flex verticalmente; cada item continua sendo um bloco independente e a direção do texto permanece inalterada, então o texto interno continua legível em linhas horizontais. writing-mode: vertical-rl muda como o próprio texto é escrito, fazendo os caracteres correrem na vertical. Use flex-direction: column para layouts verticais e writing-mode apenas para tipografia vertical de texto, como colunas tradicionais chinesas.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Flex Wrap
Controla se os itens flex quebram em várias linhas.
Atalho Flex Flow
Atalho para flex-direction e flex-wrap.
