O que é HTML e como a Web funciona. 🌴 TRILHA HTML 🟠 Etapa 01

 Seja muito bem-vindo à Academy Code Christ! 

🌍 Academy Code Christ está disponível em vários idiomas.

Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 

e aprender no seu idioma.

📚 Continue sua jornada de aprendizado

A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  

📋 Menus correspondentes:

👉 Acesse Aqui o Menu Completo do Curso de 🟠 HTML!

👉 Acesse aqui o menu completo do Curso de 🎨 CSS!

👉Acesse aqui o menu completo do Curso de 🚀 JavaScript!

👉 Acesse aqui o menu completo do Curso de 🐍 Python!

👉 Acesse aqui o menu completo do Curso de ⚙️ C Sharp!

👉 Acesse aqui o menu completo do Curso de 🐘 PHP!

💻 Pratique o que você aprende

👉 Acesse o Code Editor Mr Digitals e comece a praticar 

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.

🎨 Etapa 07 

O que você vai aprender nesta aula?

Nessa aula, você vai aprender Como o Flexbox organiza e distribui elementos; Controle de eixos, alinhamentos e espaçamento; Diferença e uso das propriedades do container e dos itens; Criação de layouts fluidos e responsivos; Montagem de um layout de cards moderno e leve.

🧠 O Que é o Flexbox

O Flexbox (Flexible Box Layout) foi criado para facilitar o design de layouts que se ajustam automaticamente em diferentes telas —
  sem precisar usar float, clear ou truques antigos de layout.

Ele trabalha com eixos e relacionamento entre pai e filhos:

●     O container pai define o comportamento flexível com display: flex;

●     Os filhos (itens) se alinham automaticamente ao longo dos eixos definidos.

🎯 Eixos do Flexbox

→  Eixo Principal (main axis)

↓  Eixo Secundário (cross axis)

 

Por padrão:

●     Eixo principal: horizontal

●     Eixo secundário: vertical

Mas isso pode mudar conforme a direção (flex-direction).

⚙️ Ativando o Flexbox

Para usar Flexbox, basta aplicar:

.container {

  display: flex;

}

 

Agora, todos os elementos filhos diretos desse container passam a se comportar de forma flexível.

📏 As Principais Propriedades do Container Flex: Propriedade   Função

flex-direction   →    Define a direção dos itens (row, column, row-reverse, column-reverse)

justify-content     →    Alinha os itens no eixo principal

align-items    →    Alinha os itens no eixo secundário

flex-wrap      →    Faz os itens quebrarem linha automaticamente

align-content   →     Controla o espaçamento entre linhas múltiplas

gap       →    Espaçamento automático entre itens (muito útil!)

🔹 Exemplo básico:

📄 HTML

<div class="container">

  <div>1</div>

  <div>2</div>

  <div>3</div>

</div>

 

📄 CSS

.container {

  display: flex;

  background: #f0f0f0;

  padding: 20px;

  gap: 10px;

}

 

.container div {

  background: #0077ff;

  color: white;

  padding: 20px;

  text-align: center;

  border-radius: 8px;

  flex: 1; /* todos crescem igualmente */

}

 

💡 Resultado: Três caixas lado a lado, automaticamente ajustadas e espaçadas.

🧭 Direção e Alinhamento

🔸 flex-direction

Define o eixo principal:

.container {

  display: flex;

  flex-direction: row; /* padrão */

}

 

Outras opções:

●     row-reverse → inverte a ordem horizontal;

●     column → itens empilhados verticalmente;

●     column-reverse → itens de baixo para cima.

🔸 justify-content

Alinha no eixo principal (horizontal por padrão):

justify-content: flex-start; /* padrão, itens à esquerda */

justify-content: center;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

 

💬 Dica: As variações space-between e space-evenly são ótimas para distribuir botões ou cards proporcionalmente.

🔸 align-items

Alinha no eixo cruzado (vertical por padrão):

align-items: flex-start;

align-items: center;

align-items: flex-end;

align-items: stretch; /* padrão */

 

Exemplo: centralizar conteúdo na tela:

body {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}

 

💥 Um dos usos mais comuns e poderosos: centralização perfeita em 2 linhas de CSS!

🔸 flex-wrap

Permite que os itens “quebrem” linha se o espaço for pequeno:

.container {

  display: flex;

  flex-wrap: wrap;

}

 

Essencial para tornar galerias e grids responsivos.

🔸 align-content

Controla o espaçamento entre as linhas quando há quebra (com wrap ativo):

align-content: space-around;

🔧  Propriedades dos Itens Filhos (os “flex items”)

Cada item do container pode ter comportamento individual controlado com estas propriedades:

Propriedade    Função

flex-grow   →   Define quanto o item pode crescer

flex-shrink     →    Define quanto o item pode encolher

flex-basis    →   Define o tamanho base do item

align-self    →   Alinha o item individualmente no eixo cruzado

order     →    Define a ordem de exibição entre os itens

🔹 Exemplo:

.item1 {

  flex-grow: 2; /* ocupa o dobro de espaço */

}

.item2 {

  order: -1; /* aparece antes dos outros */

}

 

💡 Ideal para priorizar conteúdos ou reorganizar cards sem mudar o HTML.

📘 Para um melhor Aprendizado                  🎯 Pratique com exercícios, desafios e projetos

📱 Exemplo Prático – Layout Responsivo de Cards

Vamos aplicar tudo o que vimos para criar um layout profissional de produtos ou posts, 100% com Flexbox.

📄 index.html

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Layout Flexbox</title>

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="container">

<div class="card">Card 1</div>

<div class="card">Card 2</div>

<div class="card">Card 3</div>

<div class="card">Card 4</div>

<div class="card">Card 5</div>

  </div>

</body>

</html>

 

📄 style.css

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

 

body {

  font-family: 'Poppins', sans-serif;

  background: linear-gradient(135deg, #74ABE2, #5563DE);

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

}

 

.container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 20px;

  padding: 40px;

  max-width: 1000px;

}

 

.card {

  background: white;

  color: #333;

  border-radius: 12px;

  flex: 1 1 250px; /* crescer, encolher, tamanho base */

  padding: 30px;

  text-align: center;

  box-shadow: 0 8px 16px rgba(0,0,0,0.1);

  transition: transform 0.3s;

}

 

.card:hover {

  transform: translateY(-10px);

}

 

💥 Resultado:
  Um conjunto de cartões que:

●     Se alinham automaticamente lado a lado;

●     Quebram para a linha de baixo quando o espaço é reduzido;

●     Mantêm espaçamento (gap) e proporções suaves.

⚡ Técnicas Avançadas e Dicas Profissionais

●     Use gap para espaçamento — substitui o antigo margin-right de colunas;

●     Combine flex-wrap com min-width nos filhos para grid fluido;

● Centralize qualquer coisa (inclusive textos, ícones, botões) com:

display: flex; justify-content: center; align-items: center;

●     Combine com media queries para layouts adaptáveis.

📚 Continue aprendendo CSS:

🎨 Etapa 1 👉  Introdução ao CSS

🎨 Etapa 2 👉 Sintaxe, Seletores e Propriedades Essenciais

🎨 Etapa 3 👉 Box Model, Display e Posicionamento

🎨 Etapa 4 👉 Tipografia, Cores eFundos Avançados

🎨 Etapa 5 👉  Bordas,Sombreamentos e Efeitos Visuais

🎨 Etapa 6 👉 Pseudo-Classes e Pseudo-Elementos

🎨 Etapa 7 👉 Você está nessa Etapa

🎨 Etapa 8 👉 CSS Grid: Layouts de Grade Avançados

🎨 Etapa 9 👉 Responsividade e Media Queries

🎨 Etapa 10 👉 Transições e Animações no CSS

🎨 Etapa 11 👉 Gradientes, Sombras e Estilo Translúcido

🎨 Etapa 12 👉 Variáveis e Funções (CSS Custom Properties)

🎨 Etapa 13 👉 Layout Responsivo Completo com Grid, Flexbox e Media Queries

🎨 Etapa 14 👉 Boas Práticas, e Estrutura Profissional de Projeto CSS

🎨 Etapa 15 👉 Performance, Otimização e Boas Práticas Avançadas de CSS

Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.

Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 

sem enrolação. 

Você pode apoiar o projeto se quiser 

com um café. 

☕ Pix: [email protected]