CSS Academy · Aula

Flex Wrap e Align-Content

Permita que itens flexíveis quebrem em várias linhas e alinhe essas linhas com align-content.

Flex Wrap e Align-Content é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 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.

flex-wrap: nowrap (Padrão)

Por padrão, os itens flexíveis não quebram linha. Se os itens excederem a largura do contêiner, eles encolherão ou transbordarão em vez de passar para uma nova linha.

flex-wrap: wrap

Com flex-wrap: wrap, os itens que transbordarem no eixo principal passarão para uma nova linha (ou coluna, na direção de coluna). Cada linha resultante da quebra funciona como um min contêiner flexível separado.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse quebra os itens na direção transversal oposta: novas linhas aparecem acima (na direção de linha), em vez de abaixo.

Padrão de cartões com quebra de linha

Uma disposição clássica e responsiva de cartões, na qual eles passam para a próxima linha conforme a janela de visualização diminui:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

align-content para várias linhas

align-content controla o espaçamento entre linhas quebradas no eixo transversal. Não tem efeito quando há apenas uma linha. Os valores são semelhantes aos de justify-content.

Valores de align-content

Valores disponíveis:

flex-start — agrupa as linhas em direção ao início do eixo transversal
flex-end — agrupa as linhas em direção ao final do eixo transversal
center — centraliza as linhas
space-between — espaço igual entre as linhas
space-around — espaço igual ao redor das linhas
stretch — as linhas se estendem para preencher o espaço (padrão)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items versus align-content

Diferença:

align-items — alinha os itens dentro de cada linha flexível
align-content — alinha as próprias linhas flexíveis dentro do contêiner

Espaçamento no Flexbox

A propriedade gap (anteriormente grid-gap) adiciona um espaço consistente entre os itens flexíveis sem usar margens. Ela funciona tanto para intervalos entre linhas quanto entre colunas.

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

Quebra de linha responsiva sem consultas de mídia

Faça a quebra automática em quantas colunas couberem usando um tamanho ideal fixo. Não são necessárias consultas de mídia:

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

Abreviação flex-flow

flex-flow combina flex-direction e flex-wrap em uma única declaração:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Quebra de linha versus CSS Grid

Para disposições bidimensionais complexas com linhas e colunas definidas, o CSS Grid é mais apropriado. A quebra de linhas do Flexbox é melhor para conteúdo unidimensional que eventualmente flui por várias linhas.

Verificação rápida

Qual propriedade alinha as próprias linhas quebradas quando um contêiner flexível tem várias linhas?

Recapitulação

flex-wrap: wrap permite que os itens fluam para novas linhas. align-content controla o espaçamento entre essas linhas em um contêiner com várias linhas. Use gap para obter um espaçamento consistente. Combine flex: 1 1 250px com flex-wrap para criar grades de cartões responsivas sem consultas de mídia.

Perguntas Frequentes

A aula “Flex Wrap e Align-Content” é grátis?

Sim — o texto completo de “Flex Wrap e Align-Content” é 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 “Flex Wrap e Align-Content”?

Permita que itens flexíveis quebrem em várias linhas e alinhe essas linhas com align-content. 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 3 de 4.

Quanto tempo leva a aula “Flex Wrap e Align-Content”?

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