📚Módulo 3

🎨 Layout e Posicionamento

💻 Aula 7 👉 Flexbox: Layouts Flexíveis e Responsivos.

🎯 Objetivos da Aula

● Entender o conceito de Flexbox e seus eixos;

● Aprender as propriedades principais do container flex;

● Controlar alinhamento, ordem e distribuição dos elementos filhos;

● Aprender propriedades específicas de cada item;

● Criar um layout completo e responsivo usando Flexbox.

🧠 1. 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).

⚙️ 2. 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.

📏 3. 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>

📄 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.

🧭 4. 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;

🔧 5. 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.

📱 6. 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>

<head>

<title>Layout Flexbox</title>

</head>

<body>

</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.

⚡ 7. 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 (veremos na Aula 13) para layouts adaptáveis.

🧠 8. O Que Você Aprendeu Hoje

✔️ 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.

🚀 Próxima Aula 8: CSS Grid – Layouts de Grade Avançados.

● Definir grades fixas e automáticas;

● Combinar Grid e Flexbox;

● Posicionar elementos com precisão;

● Criar um layout completo de página estilo dashboard.

💻 Aula 8 👉 CSS Grid: Layouts de Grade Avançados.

🎯 Objetivos da Aula

● Entender o funcionamento do CSS Grid;

● Criar e definir linhas e colunas com facilidade;

● Aprender as propriedades principais do container grid e dos itens;

● Controlar áreas, alinhamentos, espaçamentos e proporções;

● Criar um layout completo estilo dashboard/blog 100% com Grid.

🧠 1. O Que é o CSS Grid?

O CSS Grid Layout é um sistema bidimensional:
permite organizar os elementos em linhas e colunas simultaneamente, com controle total de tamanho, alinhamento e espaçamento.

Isso significa que você pode construir o esqueleto completo de uma página — cabeçalho, menu lateral, conteúdo e rodapé — tudo com algumas linhas de CSS.

🧩 2. Ativando o Grid

Para transformar um container em uma grade, basta declarar:

.container {

display: grid;

}

Os filhos diretos desse container se tornam automaticamente itens da grade.

⚙️ 3. Definindo Linhas e Colunas

As propriedades fundamentais são:

grid-template-columns: valor valor valor;

grid-template-rows: valor valor valor;

Cada valor representa uma coluna (ou linha) da grade.

🔹 Exemplo Básico

📄 HTML

</div>

📄 CSS

.container {

display: grid;

grid-template-columns: 100px 100px 100px;

grid-template-rows: auto auto;

gap: 10px;

}

.container div {

background: #0077ff;

color: white;

text-align: center;

padding: 20px;

border-radius: 8px;

}

💡 Resultado:

Uma grade com 3 colunas e duas linhas automáticas (cria a segunda linha automaticamente se houver mais itens).

🔸 4. Unidades Inteligentes no Grid

● px: valor fixo.

● %: percentual relativo ao container.

● fr: unidade flexível do Grid — distribui o espaço disponível.

🔹 Exemplo:

grid-template-columns: 1fr 2fr 1fr;

💬 3 colunas com proporções 1:2:1.
O meio ocupa o dobro do espaço das laterais.

🧭 5. Alinhamentos e Espaçamento

Propriedade Função

gap → Espaço entre linhas e colunas

justify-items → Alinha os itens horizontalmente dentro das células

align-items → Alinha verticalmente dentro das células

justify-content → Move o conjunto da grade horizontalmente

align-content → Move o conjunto da grade verticalmente

Exemplo:

.container {

display: grid;

gap: 20px;

justify-items: center;

align-items: center;

}

🔧 6. Posicionando Itens Especificamente

Você pode fazer com que um item ocupe uma área maior da grade, usando:

.item1 {

grid-column: 1 / 3; /* da coluna 1 até antes da 3 */

grid-row: 1 / 2;

}

💡 Outro modo:

grid-column: span 2; /* ocupa 2 colunas */

📘 Assim você cria layouts assimétricos e personalizados rapidamente.

🔲 7. Definindo Áreas Nomeadas

Você pode dar nomes às regiões da sua grade e atribuí-los aos itens — muito usado em layouts de páginas completas.

.container {

display: grid;

grid-template-areas:

"header header"

"sidebar main"

"footer footer";

grid-template-columns: 200px 1fr;

grid-template-rows: 80px auto 70px;

gap: 10px;

}

header { grid-area: header; background: #0077ff; }

aside { grid-area: sidebar; background: #e0e0e0; }

main { grid-area: main; background: #fff; }

footer { grid-area: footer; background: #ccc; }

📄 HTML correspondente:

<header>Header</header>

<aside>Sidebar</aside>

<main>Conteúdo principal</main>

<footer>Rodapé</footer>

</div>

💥 Resultado:
Um layout completo com cabeçalho, menu lateral, área principal e rodapé — tudo sem float, sem position, sem Flexbox!

📐 8. Repetição Automática com repeat()

Quando a grade tem várias colunas semelhantes:

grid-template-columns: repeat(3, 1fr);

💬 Cria automaticamente 3 colunas iguais — economiza código e é fácil de ajustar.

Você pode até combinar:

grid-template-columns: 200px repeat(2, 1fr);

🤖 9. Grid Responsivo com auto-fit e minmax()

Uma das funções mais úteis do CSS moderno.

Exemplo:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

💡 Significa:

Crie o máximo de colunas possíveis (auto-fit), com largura mínima de 250px e máxima de 1fr.

Isso faz com que os elementos se reorganizem automaticamente conforme o tamanho da tela.

🎯 Resultado:

Layout totalmente responsivo sem media queries!

🧩 10. Projeto Prático — Layout de Blog com CSS Grid

📄 index.html

<!DOCTYPE html>

<head>

<title>Blog Layout CSS Grid</title>

</head>

<body>

<aside>Navegação</aside>

<main>

</main>

</div>

</body>

</html>

📄 style.css

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

background: linear-gradient(135deg, #a2d2ff, #cdb4db);

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

.container {

display: grid;

grid-template-areas:

"header header"

"aside main"

"footer footer";

grid-template-columns: 250px 1fr;

grid-template-rows: 80px auto 60px;

width: 90%;

max-width: 1200px;

background: white;

border-radius: 12px;

overflow: hidden;

box-shadow: 0 8px 24px rgba(0,0,0,0.15);

}

header {

grid-area: header;

background: #0077ff;

color: white;

text-align: center;

font-size: 24px;

font-weight: 600;

line-height: 80px;

}

aside {

grid-area: aside;

background: #f3f5f7;

padding: 20px;

border-right: 1px solid #ddd;

}

main {

grid-area: main;

padding: 20px;

display: grid;

gap: 20px;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}

article {

background: #eef3ff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0,0,0,0.05);

text-align: center;

font-weight: 500;

transition: transform 0.3s;

}

article:hover {

transform: translateY(-6px);

}

footer {

grid-area: footer;

background: #0077ff;

color: white;

text-align: center;

line-height: 60px;

font-size: 14px;

}

💥 Resultado:

● Layout completo de blog ou portal;

● Colunas automáticas para os posts;

● Sidebar fixa e conteúdo fluido;

● Responsividade natural por causa do auto-fit.

💡 11. Dica Final — Grid + Flexbox Juntos

O Grid é excelente para o layout global da página, enquanto o Flexbox é ótimo para alinhar componentes internos.
É muito comum usar:

● Grid → estrutura geral (header, main, aside, footer)

● Flexbox → elementos dentro dessas seções (menus, botões, cartões, etc.)

Eles se complementam perfeitamente. 💪

🧠 12. O Que Você Aprendeu Hoje

✔️ O que é e como funciona o CSS Grid;
✔️ Criar grades com linhas e colunas;
✔️ Unidades fluxíveis (fr), repetição e responsividade (auto-fit);
✔️ Definir áreas nomeadas e posicionar elementos;
✔️ Criar um layout completo e responsivo de site com CSS Grid.

🚀 Próxima Aula: Responsividade e Media Queries

Na próxima aula, vamos unir tudo para:

● Fazer qualquer layout se adaptar a celulares, tablets e desktops;

● Usar media queries passo a passo;

● Praticar com um layout totalmente responsivo;

● E aprender sobre breakpoints inteligentes para o mundo real.

💻 Aula 9 👉 Responsividade e Media Queries.

🎯 Objetivos da Aula

● Entender o conceito de design responsivo;

● Identificar o que são breakpoints;

● Dominar o uso de media queries no CSS;

● Criar um layout que muda automaticamente com o tamanho da tela;

● Aprender boas práticas e estratégias para um design fluído e sustentável.

🧠 1. O Que é Responsividade?

Responsividade é o ajuste automático da interface de um site para diferentes tamanhos de tela, sem perder legibilidade ou usabilidade.

🎯 Em resumo:

O mesmo site funciona bem e parece bonito em celulares, tablets e computadores.

💡 O problema que ela resolve:

Antes da responsividade, precisávamos criar duas versões do site:

● site.com — para desktop

● m.site.com — para mobile

Hoje, o CSS faz essa adaptação automaticamente — um código, múltiplos dispositivos.

🧩 2. O Que São Breakpoints

Breakpoints são pontos de corte de largura da tela em que o layout muda de aparência.

Exemplo de breakpoints comuns:

Dispositivo Largura Aproximada

Celulares → até 600px

Tablets (modo retrato) → 600–900px

Tablets (modo paisagem) → 900–1200px

Telas grandes (desktops) → acima de 1200px

Esses valores servem de referência — cada projeto pode ajustar conforme necessidade.

🧾 3. A Sintaxe de uma Media Query

A estrutura básica é:

@media (condição) {

/* CSS aqui dentro será aplicado somente se a condição for verdadeira */

}

Exemplo:

@media (max-width: 768px) {

body {

background: lightblue;

}

💬 Isso muda o fundo somente quando a tela tiver até 768px de largura.

🧭 4. Tipos de Condições Comuns

Condição Significado

max-width → Aplica estilos abaixo de uma largura específica

min-width → Aplica estilos acima de uma largura específica

orientation → Detecta orientação do dispositivo (portrait ou landscape)

hover → Detecta se o dispositivo suporta hover (ex.: mouse vs. touch)

Example combinando condições:

@media (min-width: 600px) and (max-width: 900px) {

.menu {

background: orange;

}

🎯 O código só será executado entre 600 e 900px de largura.

🧠 5. Estratégias: Mobile-First vs Desktop-First

Existem duas formas principais de pensar responsividade:

🔹 Mobile-First (Recomendado)

Comece o design para telas pequenas e vá adicionando estilos para telas maiores.

/* Base: celular */

.container {

flex-direction: column;

}

/* Adaptações maiores */

@media (min-width: 768px) {

.container {

flex-direction: row;

}

💡 Mais eficiente — é a filosofia usada pelas grandes empresas de tecnologia.

🔹 Desktop-First

Cria o layout completo e depois remove/ajusta detalhes para telas menores.

/* Base: desktop */

.container {

flex-direction: row;

}

/* Ajustes mobile */

@media (max-width: 768px) {

.container {

flex-direction: column;

}

Ambos funcionam — escolha conforme o público principal do seu projeto.

⚙️ 6. Ferramentas Responsivas do Navegador

Todos os navegadores modernos têm simuladores:

🧭 Atalho:

● Chrome / Edge: Ctrl + Shift + M (ou Cmd + Shift + M no Mac)

● Firefox: Ferramenta de desenvolvedor → “Modo Responsivo”

Essas ferramentas permitem testar layouts em tempo real em vários tamanhos de tela.

🧱 7. Projeto Prático — Layout Fluid e Responsivo

Vamos criar um pequeno site que se adapta automaticamente de desktop a mobile.

📄 index.html

<!DOCTYPE html>

<head>

<title>Layout Responsivo</title>

</head>

<body>

<header>Meu Site Responsivo</header>

<nav>

<a href="#">Início</a>

<a href="#">Sobre</a>

<a href="#">Serviços</a>

<a href="#">Contato</a>

</nav>

<main>

<section>Conteúdo principal</section>

<aside>Barra lateral</aside>

</main>

</body>

</html>

📄 style.css

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

background: #f0f2f5;

}

header, footer {

background: #0077ff;

color: white;

text-align: center;

padding: 20px;

font-weight: 600;

}

nav {

display: flex;

justify-content: center;

background: #e8ecf2;

gap: 20px;

padding: 10px;

flex-wrap: wrap;

}

nav a {

color: #0077ff;

text-decoration: none;

font-weight: 500;

}

main {

display: grid;

grid-template-columns: 3fr 1fr;

gap: 20px;

padding: 20px;

}

section, aside {

background: white;

padding: 20px;

border-radius: 8px;

}

/*----------- RESPONSIVIDADE -----------*/

/* Tablets */

@media (max-width: 900px) {

main {

grid-template-columns: 2fr 1fr;

}

/* Celulares */

@media (max-width: 600px) {

nav {

flex-direction: column;

align-items: center;

}

main {

grid-template-columns: 1fr;

}

aside {

order: -1;

}

💥 Resultado:

● Em desktop: menu na horizontal, conteúdo e sidebar lado a lado;

● Em tablet: proporções ajustadas;

● Em celular: menu vertical, sidebar acima do conteúdo principal;

● Tudo suave e sem JavaScript!

🧠 8. Boas Práticas com Media Queries

✅ Use poucos breakpoints bem escolhidos, não crie dezenas;
✅ Evite definir valores fixos em px — prefira %, em, rem e fr;
✅ Pense na fluidez, não só no tamanho;
✅ Teste o site em dispositivos reais sempre que possível;
✅ Utilize max-width: 100% em imagens e vídeos para evitar estouros de layout;
✅ Combine Grid/Flexbox + media queries para flexibilidade total.

🧩 9. Dica Avançada — CSS Clamp e Fluid Typography

Você pode tornar fontes e espaçamentos adaptativos automaticamente, sem media queries, usando clamp():

h1 {

font-size: clamp(1.5rem, 4vw, 3rem);

}

💬 Isso significa:

O tamanho mínimo é 1.5rem, o ideal é 4% da largura da tela, e o máximo é 3rem.

✨ Resultado: tipografia 100% fluida e elegante.

🧠 10. O Que Você Aprendeu Hoje

✔️ O que é responsividade e por que é fundamental;
✔️ Como funcionam breakpoints e media queries;
✔️ Estratégias “mobile-first” e “desktop-first”;
✔️ Testes e ajustes com ferramentas reais;
✔️ Criar um site fluido e adaptável do zero;
✔️ Dicas profissionais para fluidez e escalabilidade.

💬 Próximo Módulo:

● transition, transform e animation;

● Efeitos de hover dinâmicos;

● Keyframes detalhados;

● E como criar interatividade moderna sem JavaScript.

📚 Módulo 4 → Estilo e Interatividade.

💻 Aula 10: 👉 Pseudo-classes e pseudo-elementos.

💻 Aula 11: 👉 Transições e transformações animadas.

💻 Aula 12: 👉 Animações com @keyframes.

Módulo 4 Acesse Aqui

📚 Adquira Nosso Livro Impresso

A venda de livros e materiais didáticos é destinada exclusivamente à manutenção e expansão da Academy Code, permitindo que mais jovens tenham acesso à educação tecnológica de qualidade e preparação para o mercado de trabalho.

🛒 Adquira nossos livros