🧩 Aula 5: Flexbox e Grid Layout

🎯 Objetivos de Aprendizagem

🔄 Entender Flexbox

Compreender como usar Flexbox para criar layouts unidimensionais flexíveis e dinâmicos.

📏 Dominar Grid

Utilizar CSS Grid para construir layouts bidimensionais complexos com precisão.

🤹 Combinar Técnicas

Aprender quando e como usar cada sistema de layout para obter os melhores resultados.

🔄 1. Flexbox: Layout Unidimensional

Flexbox (Flexible Box Layout) é um modelo de layout unidimensional projetado para organizar elementos em uma única direção - em linha ou coluna. É ideal para componentes de interface como menus, cards, formulários e qualquer layout que precise se adaptar dinamicamente ao espaço disponível.

Conceitos Básicos do Flexbox

O Flexbox trabalha com dois eixos principais: o eixo principal (main axis) e o eixo cruzado (cross axis). A direção do eixo principal é determinada pela propriedade flex-direction.

.container {
    display: flex;
    flex-direction: row; /* Valores: row, row-reverse, column, column-reverse */
    justify-content: space-between; /* Alinhamento no eixo principal */
    align-items: center; /* Alinhamento no eixo cruzado */
    flex-wrap: wrap; /* Permite quebra de linha dos elementos */
    gap: 20px; /* Espaçamento entre os elementos */
}

💡 Elementos do Flexbox

Container Flex: Elemento pai que recebe display: flex
Itens Flex: Filhos diretos do container flex
Eixos: Principal (direção do layout) e Cruzado (perpendicular ao principal)

Propriedades do Container Flex

Propriedade	Função	Valores Comuns
display	Define um container flex	flex, inline-flex
flex-direction	Define a direção do eixo principal	row, column, row-reverse, column-reverse
justify-content	Alinhamento no eixo principal	flex-start, flex-end, center, space-between, space-around
align-items	Alinhamento no eixo cruzado	flex-start, flex-end, center, stretch, baseline
flex-wrap	Controla quebra de linha	nowrap, wrap, wrap-reverse
gap	Espaçamento entre itens	10px, 1rem, etc.

Propriedades dos Itens Flex

Propriedade	Função	Valores Comuns
flex-grow	Fator de crescimento	0, 1, 2, etc.
flex-shrink	Fator de redução	0, 1, 2, etc.
flex-basis	Tamanho inicial	auto, 0, 100px, etc.
flex	Atalho para as três propriedades acima	flex: 1; (1 1 0%)
order	Controla a ordem de exibição	0, 1, -1, etc.
align-self	Alinhamento individual no eixo cruzado	auto, flex-start, center, etc.

🔍 Dica Prática

A propriedade flex: 1; é um atalho muito usado que equivale a flex: 1 1 0%; fazendo com que o item cresça para ocupar o espaço disponível. É ideal para criar layouts fluidos.

📏 2. CSS Grid: Layout Bidimensional

CSS Grid Layout é um sistema de layout bidimensional que permite criar estruturas complexas de linhas e colunas simultaneamente. Diferente do Flexbox (unidimensional), o Grid oferece controle preciso sobre posicionamento em ambas as direções.

Conceitos Básicos do Grid

O Grid trabalha com linhas e colunas que criam células onde os elementos são posicionados. É possível definir áreas nomeadas para melhor organização do layout.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Três colunas com tamanhos iguais */
    grid-template-rows: auto 200px auto; /* Três linhas com alturas diferentes */
    gap: 16px; /* Espaçamento entre as células */
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

📐 Unidade fr (fração)

A unidade fr representa uma fração do espaço disponível. Por exemplo, em grid-template-columns: 1fr 2fr, a segunda coluna terá o dobro da largura da primeira.

Propriedades do Container Grid

Propriedade	Função	Exemplo
display	Define um container grid	grid, inline-grid
grid-template-columns	Define colunas	100px 1fr auto
grid-template-rows	Define linhas	auto 200px 1fr
gap	Espaçamento entre células	10px, row-gap, column-gap
grid-template-areas	Define áreas nomeadas	"header header" "side main"

Posicionamento de Itens no Grid

/* Posicionamento por área nomeada */
.header {
    grid-area: header;
}

/* Posicionamento por linha/coluna */
.sidebar {
    grid-column: 1 / 2; /* Início / Fim */
    grid-row: 2 / 4;    /* Ocupa da linha 2 até a 4 */
}

/* Atalho para posicionamento (linha-início / coluna-início / linha-fim / coluna-fim) */
.content {
    grid-area: 2 / 2 / 3 / 4;
}

⚠️ Atenção

Ao usar números para posicionamento no grid, lembre-se que as linhas são numeradas começando do 1 (não do 0 como em arrays). A linha de término não é incluída no intervalo, similar a como funciona o slice() em JavaScript.

Funções Especiais do Grid

Função	Uso	Exemplo
repeat()	Repete padrões de tamanho	repeat(3, 1fr) = 1fr 1fr 1fr
minmax()	Define tamanho mínimo e máximo	minmax(100px, 1fr)
auto-fill	Cria o máximo de tracks possíveis	repeat(auto-fill, minmax(200px, 1fr))
auto-fit	Similar ao auto-fill, mas colapsa tracks vazios	repeat(auto-fit, minmax(200px, 1fr))

🤹 3. Flexbox vs Grid: Quando Usar Cada Um

Flexbox e Grid são complementares, não concorrentes. Saber quando usar cada um é crucial para um desenvolvimento eficiente.

Use Flexbox quando:	Use Grid quando:
- Precisar de um layout unidimensional (linha OU coluna)	- Precisar de layout bidimensional (linhas E colunas)
- O design for baseado em conteúdo (content-first)	- O design for baseado em layout (layout-first)
- Para pequenos componentes de UI (menus, barras de ferramentas)	- Para layouts complexos de página inteira
- Para distribuição de espaço entre itens	- Para alinhamento preciso em duas dimensões

💡 Melhor Prática

Use Grid para o layout principal da página e Flexbox para componentes menores dentro dela. Essa combinação traz o melhor dos dois mundos.

Exemplo de Combinação

/* Layout da página com Grid */
.page {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    min-height: 100vh;
}

/* Menu de navegação com Flexbox */
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

/* Cards com Flexbox */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    flex: 1 0 300px; /* Cresce, não encolhe, base 300px */
}

💪 Exercício Prático

Layout Responsivo com Flexbox e Grid

Crie um layout para uma página de blog com:

Header com menu usando Flexbox
Layout principal com sidebar e conteúdo usando Grid
Cards de artigos usando Flexbox dentro do conteúdo
Footer com três colunas usando Grid

Certifique-se de que o layout seja responsivo e adapte-se a diferentes tamanhos de tela.

<div class="blog-page">
    <header class="header">
        <div class="logo">MeuBlog</div>
        <nav class="menu">
            <a href="#">Home</a>
            <a href="#">Artigos</a>
            <a href="#">Sobre</a>
            <a href="#">Contato</a>
        </nav>
    </header>
    
    <main class="content-area">
        <aside class="sidebar">
            <h3>Categorias</h3>
            <ul>
                <li><a href="#">CSS</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </aside>
        
        <section class="articles">
            <h2>Artigos Recentes</h2>
            <div class="card-container">
                <article class="card">
                    <h3>Dominando Flexbox</h3>
                    <p>Aprenda todos os segredos do Flexbox...</p>
                </article>
                <article class="card">
                    <h3>CSS Grid na Prática</h3>
                    <p>Como criar layouts complexos...</p>
                </article>
                <article class="card">
                    <h3>Combinando os Dois</h3>
                    <p>A melhor estratégia para layouts modernos...</p>
                </article>
            </div>
        </section>
    </main>
    
    <footer class="footer">
        <div class="footer-section">
            <h4>Sobre</h4>
            <p>Blog dedicado ao CSS moderno</p>
        </div>
        <div class="footer-section">
            <h4>Links</h4>
            <ul>
                <li><a href="#">Termos</a></li>
                <li><a href="#">Privacidade</a></li>
            </ul>
        </div>
        <div class="footer-section">
            <h4>Contato</h4>
            <p>email@exemplo.com</p>
        </div>
    </footer>
</div>

/* Layout da Página */
.blog-page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "main"
        "footer";
    min-height: 100vh;
}

/* Header com Flexbox */
.header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #1976d2;
    color: white;
}

.menu {
    display: flex;
    gap: 1.5rem;
}

.menu a {
    color: white;
    text-decoration: none;
}

/* Área de Conteúdo com Grid */
.content-area {
    grid-area: main;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    padding: 2rem;
}

/* Sidebar */
.sidebar {
    background: #f5f5f5;
    padding: 1.5rem;
    border-radius: 8px;
}

/* Artigos com Flexbox */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.card {
    flex: 1 0 300px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Footer com Grid */
.footer {
    grid-area: footer;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    background: #333;
    color: white;
    padding: 2rem;
}

/* Responsividade */
@media (max-width: 768px) {
    .content-area {
        grid-template-columns: 1fr;
    }
    
    .footer {
        grid-template-columns: 1fr;
    }
    
    .header {
        flex-direction: column;
        gap: 1rem;
    }
}

📚 Recursos Adicionais

Guia Flexbox da MDN

Documentação detalhada com exemplos interativos sobre Flexbox.

Acessar →

Guia CSS Grid da MDN

Referência completa sobre CSS Grid com tutoriais passo a passo.

Acessar →

CSS Tricks - Guia Completo de Flexbox

Um dos melhores guias visuais sobre Flexbox disponíveis.

Acessar →

CSS Tricks - Guia Completo de Grid

Guia visual detalhado sobre todas as propriedades do CSS Grid.

Acessar →

Flexbox Froggy

Jogo interativo para praticar os conceitos de Flexbox.

Jogar →

Grid Garden

Jogo interativo para aprender CSS Grid enquanto cuida de um jardim.

Jogar →

✅ Checklist de Aprendizado

Verifique seu progresso nesta aula:

Entendo os conceitos básicos do Flexbox (container, itens, eixos)
Sei usar as propriedades principais do container flex (justify-content, align-items)
Compreendo como os itens flex crescem e encolhem (flex-grow, flex-shrink)
Entendo os conceitos básicos do CSS Grid (linhas, colunas, células)
Sei criar layouts com grid-template-columns e grid-template-rows
Consigo posicionar elementos usando grid-area ou grid-column/grid-row
Sei quando usar Flexbox e quando usar Grid em um projeto
Consigo combinar Flexbox e Grid para criar layouts complexos
Sei criar layouts responsivos adaptando propriedades do Flexbox e Grid