CSS Academy · Aula

Display Flex e Direção Flexível

Ative o flexbox em um contêiner e controle a direção do eixo principal com flex-direction.

Display Flex e Direção Flexível é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Ativando o Flexbox

O Flexbox é ativado definindo display: flex em um elemento contêiner (o contêiner flexível). Seus filhos diretos se tornam automaticamente itens flexíveis.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Flex inline

display: inline-flex cria um contêiner flexível que flui em linha (como inline-block), em vez de fluir como um bloco. O comportamento interno do Flexbox é idêntico.

<p>Status: <span class="badge">🔥 Trending</span></p>

O eixo principal e o eixo transversal

O Flexbox tem dois eixos:

Eixo principal: a direção primária na qual os itens são dispostos
Eixo transversal: perpendicular ao eixo principal

Todas as propriedades flexíveis se referem a esses eixos, não a direções fixas.

flex-direction: row (Padrão)

A direção padrão é row: os itens são colocados da esquerda para a direita ao longo do eixo principal horizontal.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column empilha os itens verticalmente. O eixo principal se torna vertical, e o eixo transversal se torna horizontal.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse inverte a direção horizontal: os itens são colocados da direita para a esquerda. O início do eixo principal fica à direita.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse empilha os itens de baixo para cima. O último item aparece na parte superior.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction afeta todas as propriedades flexíveis

Quando você altera flex-direction, justify-content também muda de direção. Se a direção for column, justify-content alinhará os itens ao longo do eixo vertical, não do horizontal.

Disposição horizontal simples

O caso de uso mais simples do Flexbox — centralizar itens em uma navegação:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

Disposição vertical simples

Centralizando vertical e horizontalmente o conteúdo de um cartão:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

Abreviação flex-flow

flex-flow é uma abreviação para flex-direction e flex-wrap:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Verificação rápida

Quando flex-direction: column está definido, qual eixo justify-content controla?

Recapitulação

Defina display: flex em um contêiner para criar um contexto flexível para seus filhos. flex-direction define a direção do eixo principal: row (horizontal) ou column (vertical). Todas as propriedades de alinhamento flexível são relativas a esses eixos, não a direções fixas para a esquerda/direita ou para cima/baixo.

Perguntas Frequentes

A aula “Display Flex e Direção Flexível” é grátis?

Sim — o texto completo de “Display Flex e Direção Flexível” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Display Flex e Direção Flexível”?

Ative o flexbox em um contêiner e controle a direção do eixo principal com flex-direction. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Display Flex e Direção Flexível”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para CSS Academy