Pular para conteúdo

Aula 12 - Flexbox 📐

Objetivo

Objetivo: Dominar o CSS Flexbox para criar layouts flexíveis e alinhar elementos de forma profissional e simples, tanto na horizontal quanto na vertical.

1. O que é Flexbox? 🤔

O Flexible Box Layout (ou Flexbox) é um modelo de layout que permite distribuir espaço e alinhar itens em uma interface de forma muito eficiente.

  • Antigamente: Usávamos float e tabelas (dava muito erro).
  • Hoje: O Flexbox é o padrão para layouts de uma única direção (uma linha ou uma coluna).

2. O Container e os Itens 📦

Para usar Flexbox, precisamos de um pai (Flex Container) e seus filhos (Flex Items).

.pai {
    display: flex; /* Aqui a mágica começa! */
}

3. Alinhamento no Eixo Principal (Justify Content) ↔️

O Eixo Principal (Main Axis) é, por padrão, a horizontal. Com a propriedade justify-content, controlamos o alinhamento horizontal:

  • flex-start: Itens no início (esquerda).
  • center: Itens no centro.
  • flex-end: Itens no final (direita).
  • space-between: Espaço igual entre os itens.
  • space-around: Espaço igual ao redor dos itens.

4. Alinhamento no Eixo Secundário (Align Items) ↕️

O Eixo Secundário (Cross Axis) é a vertical. Com align-items, controlamos a altura dos itens:

  • stretch: Estica os itens para ocupar toda a altura (padrão).
  • center: Centraliza verticalmente.
  • flex-start: Alinha no topo.
  • flex-end: Alinha na base.

5. Visualizando os Eixos 📊

graph LR
    P[Pai: display: flex] --> I1[Item 1]
    P --> I2[Item 2]
    P --> I3[Item 3]
    Note over P: Eixo Principal (Justify)
    Note over P: Eixo Secundário (Align)

6. Direção e Quebra (Direction & Wrap) 🔄

  • flex-direction: Define se os itens ficam em linha (row) ou coluna (column).
  • flex-wrap: Por padrão, o flex tenta colocar tudo em uma linha só. Com flex-wrap: wrap, os itens pulam de linha se não houver espaço.

7. Prática: Centralização Perfeita 🚀

Antes do Flexbox, centralizar algo era um pesadelo. Agora:

$ touch index.html estilo.css
$ # No CSS, para centralizar um item no meio da tela:
$ .container-pai {
$   display: flex;
$   justify-content: center;
$   align-items: center;
$   height: 100vh; /* Altura total da tela */
$ }

8. Mini-Projeto: Barra de Navegação Moderna 🖱️

  1. Crie um <nav> com uma lista <ul> e 4 links.
  2. No CSS, transforme o <ul> em um Flex Container.
  3. Use justify-content: space-between para afastar os links.
  4. Remova as "bolinhas" da lista com list-style: none.
  5. Adicione um padding para ficar elegante.

9. Exercícios Progressivos 📝

Básicos

  1. Como transformamos um elemento em um Flex Container?
  2. Para que serve a propriedade justify-content?

Intermediários

  1. Qual a diferença entre space-between e space-around?
  2. Como fariam para transformar uma lista de links horizontal em uma lista vertical usando Flexbox?

Desafio 🧠

  1. O que acontece com os itens de uma lista flex se definirmos flex-direction: column-reverse? Teste e descreva o resultado.

Próxima Aula: Vamos construir grades complexas com o Grid Layout! 🏁