Arquivos gap css - Web-Zoneware

Espaçamento com gap no Grid e Flexbox | Web Academy

Web-Zoneware — Thu, 22 Oct 2026 02:47:44 +0000

Durante duas décadas, colocar um simples espaço vazio entre dois botões ou entre três cartões de uma galeria foi uma das tarefas mais frustrantes do desenvolvimento web. Como a propriedade margin é aplicada a todas as instâncias de um elemento, a margem do último filho empurrava a borda externa do contêiner para fora, exigindo “gambiarras” como :last-child { margin-right: 0 } ou margens negativas tenebrosas no contêiner pai (margin: -10px). Essa era de sofrimento acabou com a padronização da propriedade universal gap no CSS Grid e no Flexbox.

1. A História e a Unificação do `gap`

Originalmente, a propriedade foi criada sob os nomes grid-gap, grid-row-gap e grid-column-gap, funcionando com exclusividade dentro de contêineres com display: grid.

Ao perceber a elegância e a precisão dessa solução, o comitê da W3C (através do módulo CSS Box Alignment Level 3) tomou uma decisão histórica:

Removeu o prefixo restritivo grid-, rebatizando as propriedades para gap, row-gap e column-gap.
Estendeu o suporte dessas propriedades para o CSS Flexbox e até para colunas de texto com column-count!

Compatibilidade Total: Hoje, 100% dos navegadores modernos (Chrome, Firefox, Safari, Edge, Opera) suportam a propriedade gap sem prefixo tanto no Grid quanto no Flexbox. Você não precisa mais de nenhum hack de margem negativa!

2. Sintaxe e Valores do `gap`

A propriedade abreviada gap aceita um ou dois valores para definir o espaçamento vertical e horizontal:

CSS3 15 linhas

/* Sintaxe: gap: [row-gap] [column-gap]; */
.conteiner {
  gap: 24px 16px; /* 24px entre linhas, 16px entre colunas */
}
 
/* Valor Único: aplica a mesma distância em ambas as direções */
.conteiner-quadrado {
  gap: 20px; /* 20px entre linhas E colunas */
}
 
/* Propriedades Longas e Independentes */
.conteiner-detalhado {
  row-gap: 32px;    /* Espaço vertical entre linhas */
  column-gap: 12px; /* Espaço horizontal entre colunas */
}

/* Sintaxe: gap: [row-gap] [column-gap]; */
.conteiner {
  gap: 24px 16px; /* 24px entre linhas, 16px entre colunas */
}

/* Valor Único: aplica a mesma distância em ambas as direções */
.conteiner-quadrado {
  gap: 20px; /* 20px entre linhas E colunas */
}

/* Propriedades Longas e Independentes */
.conteiner-detalhado {
  row-gap: 32px;    /* Espaço vertical entre linhas */
  column-gap: 12px; /* Espaço horizontal entre colunas */
}

3. Como o `gap` Opera no CSS Grid

No CSS Grid, o gap atua diretamente sobre as canaletas (gutters) que separam as Grid Lines:

Ele adiciona respiro exclusivamente entre as faixas internas da grade.
Ele nunca adiciona espaço nas bordas externas do contêiner (entre a borda do pai e a primeira/última linha). O espaço externo continua sendo controlado por padding no pai.
O motor do Grid deduz o tamanho total somado de todos os gaps antes de computar as frações fr, garantindo que o layout nunca transborde a tela.
Quando usamos repeat(auto-fit, minmax(...)), qualquer coluna vazia que colapsar para 0px tem seu gap correspondente também colapsado a zero automaticamente!

4. Como o `gap` Opera no CSS Flexbox

No Flexbox, o gap é a solução definitiva para o alinhamento de listas e botões:

Em um contêiner com flex-direction: row, o gap atua horizontalmente apenas entre os irmãos adjacentes. O último item encosta perfeitamente na borda direita sem sobras.
Em um contêiner com flex-direction: column, o gap atua verticalmente apenas entre os itens empilhados.
Quando você ativa a quebra de linha com flex-wrap: wrap, o row-gap controla com precisão a distância entre as linhas que caem, eliminando a necessidade de seletores condicionais complexos.

Onde o gap NÃO Funciona: A propriedade gap só é reconhecida pelo navegador em elementos com contexto de formatação estruturado: display: grid, display: inline-grid, display: flex e display: inline-flex. Aplicar gap em caixas normais com display: block ou inline-block não produzirá absolutamente nenhum efeito!

5. Matriz Comparativa: `gap` no Grid vs. `gap` no Flexbox

Aspecto	Comportamento no CSS Grid	Comportamento no Flexbox
Natureza do Vão	Canaleta bidimensional rígida entre linhas de grade.	Respiro unidimensional dinâmico entre itens vizinhos.
Tratamento do Espaço	Descontado antes do cálculo das frações `fr`.	Consumido como espaço não flexível no eixo ativo.
Quebra de Linhas	Controlado nativamente pela definição de linhas e colunas.	`row-gap` atua entre as linhas criadas por `flex-wrap`.
Bordas Externas	Zero espaço nas extremidades externas.	Zero espaço antes do 1º item e após o último.

6. Laboratório Prático: Comparando `gap` no Flexbox e no Grid

No exemplo abaixo, observe como o gap resolve com pouquíssimas linhas dois desafios comuns: um formulário de cadastro em Flexbox e uma grade de métricas em CSS Grid com espaçamento assimétrico:

HTML5 99 linhas

 html>
 lang="pt-BR">

   charset="UTF-8">
  </span>Laboratório de Espaçamento com gap<span class="wzw-tk-tag">
  


   style="color:#e2e8f0; margin-top:0;">1. Barra de Ações com Flexbox (gap: 12px)
   class="barra-acoes-flex">
     class="btn-acao btn-destaque">+ Novo Projeto
     class="btn-acao">Filtrar
     class="btn-acao">Exportar PDF
     class="btn-acao">Configurações


 
   style="color:#e2e8f0;">2. Grade com CSS Grid e Gap Assimétrico (gap: 28px 16px)
   class="grade-metricas-grid">
     class="card-metrica">
      Consultas API
       class="numero">1.42M


     class="card-metrica">
      Tempo Médio
       class="numero">42ms
    
     class="card-metrica">
      Erros HTTP
       class="numero" style="color:#10b981;">0.00%
    
     class="card-metrica">
      Uptime
       class="numero">99.98%

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Espaçamento com gap</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 30px;
      margin: 0;
    }

    /* 1. FLEXBOX COM GAP (Barra de Ações e Formulário) */
    .barra-acoes-flex {
      display: flex;
      flex-wrap: wrap;
      gap: 12px; /* 12px entre os botões sem vazar nas pontas */
      background: #1e293b;
      padding: 16px;
      border-radius: 10px;
      border: 1px solid #334155;
      margin-bottom: 30px;
    }

    .btn-acao {
      background: #334155;
      color: #fff;
      border: none;
      padding: 10px 18px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
    }

    .btn-destaque {
      background: #2563eb;
    }

    /* 2. CSS GRID COM GAP ASSIMÉTRICO (row-gap diferente de column-gap) */
    .grade-metricas-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 28px 16px; /* 28px vertical (row-gap) e 16px horizontal (column-gap) */
    }

    .card-metrica {
      background: #111827;
      border: 1px solid #1f2937;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .card-metrica h4 {
      margin: 0;
      font-size: 0.85rem;
      color: #94a3b8;
    }

    .card-metrica .numero {
      font-size: 1.8rem;
      font-weight: 800;
      color: #38bdf8;
      margin-top: 6px;
    }
  </style>
</head>
<body>
  <h3 style="color:#e2e8f0; margin-top:0;">1. Barra de Ações com Flexbox (<code>gap: 12px</code>)</h3>
  <div class="barra-acoes-flex">
    <button class="btn-acao btn-destaque">+ Novo Projeto</button>
    <button class="btn-acao">Filtrar</button>
    <button class="btn-acao">Exportar PDF</button>
    <button class="btn-acao">Configurações</button>
  </div>

  <h3 style="color:#e2e8f0;">2. Grade com CSS Grid e Gap Assimétrico (<code>gap: 28px 16px</code>)</h3>
  <div class="grade-metricas-grid">
    <div class="card-metrica">
      <h4>Consultas API</h4>
      <div class="numero">1.42M</div>
    </div>
    <div class="card-metrica">
      <h4>Tempo Médio</h4>
      <div class="numero">42ms</div>
    </div>
    <div class="card-metrica">
      <h4>Erros HTTP</h4>
      <div class="numero" style="color:#10b981;">0.00%</div>
    </div>
    <div class="card-metrica">
      <h4>Uptime</h4>
      <div class="numero">99.98%</div>
    </div>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste alterar os valores do gap para observar a separação fluida e higiênica sem alteração das margens externas:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

A propriedade gap unificou o espaçamento entre elementos no CSS Grid e no Flexbox, eliminando hacks de margem negativa.
A sintaxe gap: [row-gap] [column-gap] permite definir espaçamentos verticais e horizontais independentes.
O gap nunca vaza para fora das extremidades externas do contêiner, atuando exclusivamente entre os itens irmãos.
No CSS Grid, o gap é subtraído matematicamente pelo navegador antes do cálculo de frações fr.
No Flexbox, o gap funciona em linha única e também entre linhas quebradas por flex-wrap.

Próximo Passo: Imagine poder desenhar o mapa visual da sua página inteira em texto puro no CSS, escrevendo palavras como "header header" e "sidebar main"? Na Lição 35, conheceremos a técnica mais elegante de arquitetura web: Áreas Nomeadas com grid-template-areas!

O post Espaçamento com gap no Grid e Flexbox | Web Academy apareceu primeiro em Web-Zoneware.

Flex Container e Alinhamentos no Flexbox | Web Academy

Web-Zoneware — Thu, 22 Oct 2026 02:09:11 +0000

Na lição anterior, desvendamos a bússola do Flexbox: o Eixo Principal (Main Axis) e o Eixo Transversal (Cross Axis). Agora que você domina a orientação espacial, é hora de assumir o papel de maestro. O elemento pai — o Flex Container — possui um conjunto de propriedades cirúrgicas para determinar se os filhos quebram linha, como o espaço livre é distribuído e como cada caixa se alinha vertical e horizontalmente. Nesta lição, você dominará justify-content, align-items, flex-wrap, align-content, a propriedade moderna gap e o truque mágico de margin: auto.

1. Quebrando Linhas: `flex-wrap` e o Atalho `flex-flow`

Por padrão, o Flexbox tenta acomodar todos os itens filhos em uma única linha contínua, não importa o quão estreita seja a janela do navegador. Essa regra é controlada por flex-wrap:

CSS3 4 linhas

.conteiner {
  display: flex;
  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
}

.conteiner {
  display: flex;
  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
}

nowrap (Padrão): Os itens são espremidos horizontalmente. Se possuírem larguras mínimas ou textos inquebráveis, transbordarão para fora do contêiner.
wrap: Permite que os itens quebrem para uma nova linha imediatamente quando não houver mais espaço no Eixo Principal. É a chave para criar galerias de cards responsivas sem media queries!
wrap-reverse: Semelhante ao wrap, mas as novas linhas são criadas na direção transversal inversa (de baixo para cima no modo linha).

O Atalho Rápido: `flex-flow`

Você pode declarar flex-direction e flex-wrap simultaneamente em uma única linha usando a propriedade abreviada flex-flow:

CSS3 5 linhas

/* Direção em linha + quebra automática de linha */
.grid-cards {
  display: flex;
  flex-flow: row wrap;
}

/* Direção em linha + quebra automática de linha */
.grid-cards {
  display: flex;
  flex-flow: row wrap;
}

2. Distribuição no Eixo Principal: `justify-content`

A propriedade justify-content gerencia o que fazer com o espaço livre que sobrou ao longo do Eixo Principal (Main Axis). Ela oferece 6 valores consagrados:

CSS3 4 linhas

.conteiner {
  display: flex;
  justify-content: space-between;
}

.conteiner {
  display: flex;
  justify-content: space-between;
}

flex-start (ou start): Os itens são empacotados no início do Eixo Principal (padrão).
flex-end (ou end): Os itens são empacotados no final do Eixo Principal.
center: Os itens são agrupados exatamente no centro geométrico do eixo.
space-between: O primeiro item cola na borda inicial, o último cola na borda final, e todo o espaço restante é dividido igualmente entre os itens intermediários. É o clássico padrão de cabeçalhos com Logo à esquerda e Links à direita!
space-around: O espaço livre é distribuído igualmente ao redor de cada item. Como resultado, o vão visual entre dois itens é o dobro do espaço entre a borda externa e o primeiro/último item.
space-evenly: Matemática pura! Todos os vãos — inclusive os espaços entre as bordas externas e os itens das pontas — possuem larguras rigorosamente idênticas.

3. Alinhamento no Eixo Transversal: `align-items`

Enquanto justify-content governa o Eixo Principal, a propriedade align-items define como os itens se alinham individualmente ao longo do Eixo Transversal (Cross Axis) dentro de sua respectiva linha flexível:

CSS3 4 linhas

.conteiner {
  display: flex;
  align-items: center; /* stretch | flex-start | flex-end | center | baseline */
}

.conteiner {
  display: flex;
  align-items: center; /* stretch | flex-start | flex-end | center | baseline */
}

stretch (Padrão): Os itens se esticam para preencher 100% da altura da linha flexível (desde que você não tenha declarado uma altura rígida como height: 100px neles). Isso resolve o problema histórico de cartões com alturas desiguais!
flex-start: Os itens se alinham no início do Eixo Transversal (topo, no modo linha).
flex-end: Os itens se alinham na base do Eixo Transversal.
center: Centraliza os itens verticalmente. A lendária “centralização absoluta no CSS” é resolvida combinando apenas:
CSS3 5 linhas
```
.centralizar-tudo {
  display: flex;
  justify-content: center; /* Centro no Main Axis */
  align-items: center;     /* Centro no Cross Axis */
}
```
.centralizar-tudo { display: flex; justify-content: center; /* Centro no Main Axis */ align-items: center; /* Centro no Cross Axis */ }
baseline: Alinha todos os itens pela linha de base da tipografia de seu texto interno. É indispensável para alinhar um ícone pequeno, uma etiqueta e um título de tamanho de fonte diferente, mantendo os olhos do leitor em uma linha de leitura perfeita!

4. Alinhamento de Múltiplas Linhas: `align-content`

Muitos desenvolvedores confundem align-items com align-content. Entenda a diferença de uma vez por todas:

A Regra de Ouro do align-content:

align-items controla como os itens se alinham dentro da sua própria linha.
align-content controla como as linhas inteiras são distribuídas entre si dentro do contêiner.
Condição Obrigatória: align-content só produz efeito se o contêiner tiver flex-wrap: wrap ativo, houver duas ou mais linhas de conteúdo E houver altura sobrando no Eixo Transversal!

Se você tiver várias linhas de cartões e quiser que todas fiquem coladas no topo sem espaços vazios exagerados entre elas, aplique:

CSS3 5 linhas

.galeria-cards {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* Evita que o padrão 'stretch' separe as linhas */
}

.galeria-cards {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* Evita que o padrão 'stretch' separe as linhas */
}

5. Espaçamento Moderno com `gap`

Antigamente, para colocar 16px de espaço entre itens flexíveis sem criar margens indesejadas nas bordas externas do contêiner, desenvolvedores recorriam a hacks complexos com margens negativas no pai (margin: -8px) e paddings nos filhos.

Hoje, a propriedade padronizada gap resolve isso de forma limpa e nativa:

CSS3 7 linhas

.grade-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;          /* Aplica 20px de espaçamento entre linhas e colunas */
  row-gap: 30px;      /* Espaçamento vertical entre linhas */
  column-gap: 15px;   /* Espaçamento horizontal entre colunas */
}

.grade-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;          /* Aplica 20px de espaçamento entre linhas e colunas */
  row-gap: 30px;      /* Espaçamento vertical entre linhas */
  column-gap: 15px;   /* Espaçamento horizontal entre colunas */
}

6. O Truque Mágico do `margin: auto` no Flexbox

No Flexbox, o valor auto em margens adquire um superpoder inacreditável. Se você aplicar margin-left: auto em um item flexível específico, ele absorverá todo o espaço livre restante no Eixo Principal, empurrando a si mesmo e todos os itens que vierem depois para a extrema direita!

HTML5 8 linhas


 class="navbar">
   class="logo">Web-ZoneWare


   href="#">Início
   href="#">Cursos
  
   class="btn-login" style="margin-left: auto;">Entrar

<!-- Navbar Profissional Sem Cálculos Manuais -->
<nav class="navbar">
  <div class="logo">Web-ZoneWare</div>
  <a href="#">Início</a>
  <a href="#">Cursos</a>
  <!-- O botão abaixo empurra a si mesmo para a extrema direita! -->
  <button class="btn-login" style="margin-left: auto;">Entrar</button>
</nav>

7. Matriz Resumo das Propriedades do Flex Container

Propriedade	Eixo de Atuação	Valores Principais	Função Arquitetural
`flex-direction`	Ambos	`row`, `row-reverse`, `column`, `column-reverse`	Define qual direção física é o Main Axis.
`flex-wrap`	Main Axis	`nowrap`, `wrap`, `wrap-reverse`	Controla se os itens quebram linha ou são espremidos.
`justify-content`	Main Axis	`flex-start`, `center`, `space-between`, `space-evenly`	Distribui os itens e o espaço livre no eixo primário.
`align-items`	Cross Axis	`stretch`, `flex-start`, `center`, `baseline`	Alinha cada item na transversal de sua linha.
`align-content`	Cross Axis	`stretch`, `flex-start`, `center`, `space-between`	Distribui as linhas inteiras quando há `wrap`.
`gap`	Ambos	Valores em `px`, `rem`, etc.	Cria canaletas de respiro exclusivas entre os itens.

8. Laboratório Prático: Navbar Moderna e Grade Flexível

No exemplo abaixo, combinamos uma barra de navegação com justify-content e margin-left: auto com uma galeria de cartões que quebra linhas suavemente via flex-wrap: wrap e espaçamento com gap:

HTML5 92 linhas

 html>
 lang="pt-BR">

   charset="UTF-8">
  </span>Laboratório de Flex Container<span class="wzw-tk-tag">
  


   class="navbar">
     class="logo">⚡ WebZoneWare


     href="#" class="nav-link">Academy
     href="#" class="nav-link">Ferramentas
     href="#" class="nav-link">Blog
     class="btn-cta">Acessar Conta
  
 
   style="color:#e2e8f0;">Grade de Cartões Adaptável (flex-wrap: wrap)
   class="card-grid">
     class="card">Módulo 01Fundamentos e Seletores


     class="card">Módulo 02Box Model e Tipografia


     class="card">Módulo 03Posicionamento e Flexbox
     class="card">Módulo 04CSS Grid e Responsividade

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Flex Container</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 24px;
      margin: 0;
    }

    /* 1. Navbar com Alinhamento Misto */
    .navbar {
      display: flex;
      align-items: center;
      gap: 20px;
      background: #1e293b;
      padding: 16px 24px;
      border-radius: 12px;
      border: 1px solid #334155;
      margin-bottom: 30px;
    }

    .logo {
      font-weight: 800;
      color: #38bdf8;
      font-size: 1.2rem;
    }

    .nav-link {
      color: #94a3b8;
      text-decoration: none;
      font-weight: 500;
    }

    /* O botão absorve o espaço livre à sua esquerda */
    .btn-cta {
      margin-left: auto;
      background: #2563eb;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
    }

    /* 2. Grade de Cartões com Wrap e Gap */
    .card-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .card {
      flex: 1 1 200px; /* Base de 200px, expande para preencher a linha */
      background: #111827;
      border: 1px solid #1f2937;
      border-radius: 12px;
      padding: 20px;
      box-sizing: border-box;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .card h4 { margin: 0 0 8px 0; color: #10b981; }
    .card p { margin: 0; font-size: 0.85rem; color: #9ca3af; }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="logo">⚡ WebZoneWare</div>
    <a href="#" class="nav-link">Academy</a>
    <a href="#" class="nav-link">Ferramentas</a>
    <a href="#" class="nav-link">Blog</a>
    <button class="btn-cta">Acessar Conta</button>
  </nav>

  <h3 style="color:#e2e8f0;">Grade de Cartões Adaptável (<code>flex-wrap: wrap</code>)</h3>
  <div class="card-grid">
    <div class="card"><h4>Módulo 01</h4><p>Fundamentos e Seletores</p></div>
    <div class="card"><h4>Módulo 02</h4><p>Box Model e Tipografia</p></div>
    <div class="card"><h4>Módulo 03</h4><p>Posicionamento e Flexbox</p></div>
    <div class="card"><h4>Módulo 04</h4><p>CSS Grid e Responsividade</p></div>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e redimensione a janela de visualização para testemunhar os cartões quebrando de linha e o botão da Navbar permanecendo perfeitamente alinhado à direita:

⚡ Abrir no Playground IDE →

9. Resumo e Próximos Passos

flex-wrap: wrap permite que os itens quebrem para novas linhas quando a largura acaba.
justify-content governa o alinhamento e o espaçamento ao longo do Eixo Principal (Main Axis).
align-items alinha cada item individual na vertical da sua linha (Cross Axis).
align-content só atua quando há múltiplas linhas (wrap) para distribuir as linhas entre si.
gap elimina a necessidade de margens negativas para separar itens flexíveis.
margin-left: auto absorve todo o espaço vago e empurra elementos para o fim da linha.

Próximo Passo: Agora que você conhece todas as regras do elemento pai (Container), é hora de aprender a dar inteligência individual para cada filho! Na Lição 29, desvendaremos os Flex Items: flex-grow, flex-shrink, flex-basis, o atalho flex e a propriedade order!

O post Flex Container e Alinhamentos no Flexbox | Web Academy apareceu primeiro em Web-Zoneware.

Arquivos gap css - Web-Zoneware

Espaçamento com gap no Grid e Flexbox | Web Academy

1. A História e a Unificação do gap

2. Sintaxe e Valores do gap

3. Como o gap Opera no CSS Grid

4. Como o gap Opera no CSS Flexbox

5. Matriz Comparativa: gap no Grid vs. gap no Flexbox

6. Laboratório Prático: Comparando gap no Flexbox e no Grid

Consultas API

Tempo Médio

Erros HTTP

Uptime

7. Resumo e Próximos Passos

Flex Container e Alinhamentos no Flexbox | Web Academy

1. Quebrando Linhas: flex-wrap e o Atalho flex-flow

O Atalho Rápido: flex-flow

2. Distribuição no Eixo Principal: justify-content

3. Alinhamento no Eixo Transversal: align-items

4. Alinhamento de Múltiplas Linhas: align-content

5. Espaçamento Moderno com gap

6. O Truque Mágico do margin: auto no Flexbox

7. Matriz Resumo das Propriedades do Flex Container

8. Laboratório Prático: Navbar Moderna e Grade Flexível

Módulo 01

Módulo 02

Módulo 03

Módulo 04

9. Resumo e Próximos Passos

1. A História e a Unificação do `gap`

2. Sintaxe e Valores do `gap`

3. Como o `gap` Opera no CSS Grid

4. Como o `gap` Opera no CSS Flexbox

5. Matriz Comparativa: `gap` no Grid vs. `gap` no Flexbox

6. Laboratório Prático: Comparando `gap` no Flexbox e no Grid

1. Quebrando Linhas: `flex-wrap` e o Atalho `flex-flow`

O Atalho Rápido: `flex-flow`

2. Distribuição no Eixo Principal: `justify-content`

3. Alinhamento no Eixo Transversal: `align-items`

4. Alinhamento de Múltiplas Linhas: `align-content`

5. Espaçamento Moderno com `gap`

6. O Truque Mágico do `margin: auto` no Flexbox